кнопка многострочная bootstrap с переменными

Question

Я пытаюсь создать кнопку bootstrap с многострочным текстом и вставкой переменных в каждую строку. Это иллюстрирует то, что я имею в виду:

Я пытаюсь добавить переменные, чтобы они выглядели так, как показано. Я создал многострочную строковую переменную и попытался добавить ее через jquery:

button.text(textVariable)

, но текст не переносится кнопкой. Есть ли способ сделать это?

Answer 1

Используйте white-space: pre-line; вместе с литералами шаблона:

let rating = "5 stars", review = "Nice product!"

let text = `Rating: ${rating}\nReview: ${review}`;

$(button).text(text)

body{ padding: 25px; }
#button { white-space: pre-line; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<h3>Rating and Review</h3>
<button id="button" class="btn btn-info text-left">Text</button>