[Vuejs]-How to add a multi-line text for a button using template literals

by

0👍

The line break dosen’t work as it should in the button for text. You can use br or p tag and use v-html binding to display it.

Here is the example:

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

In Template:

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

Tip: remove the height from button style and use display-inline block to adapt the height based on context.

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

Leave a comment