Как отобразить многострочный текст внутри div, при назначении текста div с помощью функции jquery. html ()

Question

Я хочу отображать многострочный текст внутри div. Я использую функцию jquery. html (js string), чтобы присвоить строку javascript классу div с именем question. Внутри этой строки я использовал тег
, чтобы попытаться разбить строку, как только она будет присвоена вопросу класса div.

Я пытался использовать несколько css классов, перенос слов и пробелы, но безрезультатно. Я также попытался назначить \ n вместо тегов
, но безрезультатно.

Обрезает строку, в которой находится первый тег
.

Любая помощь будет принята с благодарностью. Заранее спасибо.

var question = "This car company <br> was known for their dent resistant doors. <br> Which turned out to be doors with a plastic outer shell. It is <br> also the name of a planet with a ring around it, and has now gone bankrupt.";

$(document).ready(function(){
  $('.question').html(question);
});

.question, 
.answer{
  /* display:flex;
  align-items:center;
  justify-content: center; */
  line-height: 13em;
  height:13em;
}

.questionboard, 
.answerboard{
  height: 15.1em;
  font-size: 2.4em;
  color: white;
  font-family: 'Arial', sans-serif;
  letter-spacing: -1;
  border: 5px solid #000000;
  text-decoration: bold;
  background: #000066;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Questions-->
        <div class="questionboard" id="questionboard">
            <div class="question" id="question">This is just a placeholder..</div>
            <button onclick="displayAnswer()">Answer</button>
            <button onclick="back()">Back</button>
        </div>

Answer 1

В вашем CSS у вас было line-height на 13em , что является очень большим значением, и я отредактировал его как 1em , проблема решена.

var question = "This car company <br> was known for their dent resistant doors. <br> Which turned out to be doors with a plastic outer shell.  <br>It is also the name of a planet with a ring around it, and has now gone bankrupt.";

$(document).ready(function(){
  $('.question').html(question);
});

.question, 
.answer{
  /* display:flex;
  align-items:center;
  justify-content: center; */
  line-height: 1em;
  height:13em;
}

.questionboard, 
.answerboard{
  height: 15.1em;
  font-size: 2.4em;
  color: white;
  font-family: 'Arial', sans-serif;
  letter-spacing: -1;
  border: 5px solid #000000;
  text-decoration: bold;
  background: #000066;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Questions-->
        <div class="questionboard" id="questionboard">
            <div class="question" id="question">This is just a placeholder..</div>
            <button onclick="displayAnswer()">Answer</button>
            <button onclick="back()">Back</button>
        </div>

Answer 2

Это высота строки: поскольку одна строка равна самому div, следующая строка фактически находится под div (вы не видите его, так как это белый текст на белом фоне).

попробуйте это:

var question = "This car company <br> was known for their dent resistant doors. <br> Which turned out to be doors with a plastic outer shell. It is <br> also the name of a planet with a ring around it, and has now gone bankrupt.";

$(document).ready(function(){
  $('.question').html(question);
});

.question, 
.answer{
  display:flex;
  align-items:center;
  justify-content: center;
  height:13em;
}

.questionboard, 
.answerboard{
  height: 15.1em;
  font-size: 2.4em;
  color: white;
  font-family: 'Arial', sans-serif;
  letter-spacing: -1;
  border: 5px solid #000000;
  text-decoration: bold;
  background: #000066;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Questions-->
        <div class="questionboard" id="questionboard">
            <div class="question" id="question">This is just a placeholder..</div>
            <button onclick="displayAnswer()">Answer</button>
            <button onclick="back()">Back</button>
        </div>