如何使用模板文字为按钮添加多行文本答案

【问题标题】：How to add a multi-line text for a button using template literals如何使用模板文字为按钮添加多行文本
【发布时间】：2021-07-19 12:11:00
【问题描述】：

我想在我的 nuxtjs 应用程序中使用 javascript 设置按钮的文本。文本应该是多行的，第二行是来自其他地方的值。这是我写的代码，但它不起作用：

data(){
  return{
    text: null,
    otherValue: "this is line two"
  }
},
methods:{
  setText(){
    this.text = `this is line one \n `${this.otherValue}`
  }
},
mounted(){
  this.setText()
}

它的作用是将尽可能多的字符放入第一行，如果没有空格则转到第二行。我该如何解决？

P.S 这是我的按钮的 CSS：

  background-color: #85c53a;
  border: solid 0px;
  width: 190px;
  height: 50px;
  color: white;
  font-size: 12px;
  font-weight: 700;

【问题讨论】：

你试过<br>而不是\n吗？

标签： javascript html css vue.js nuxtjs

【解决方案1】：

换行符在文本按钮中无法正常工作。您可以使用br 或p 标签并使用v-html 绑定来显示它。

示例如下：

setText(){
  this.text = `this is line one <br />${this.otherValue}`
}

在模板中：

<button class="btn" v-html="text"></button>

提示：从按钮样式中移除高度，并使用 display-inline 块根据上下文调整高度。

.btn{
    background-color: #85c53a;
    border: solid 0px;
    width: 190px;
    color: white;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
  }

【讨论】：