使用 jquery.html() 函数将文本分配给 div 时，如何在 div 内显示多行文本

Question

我想在div内显示多行文本。我正在使用jquery函数.html(js字符串(将javascript字符串分配给名为question的div类。在这个字符串中，我使用标签尝试
在字符串分配给div 类问题后分解字符串。

我尝试使用一些css类，自动换行和空格无济于事。我也尝试分配 而不是
标签也无济于事。

它切断第一个
标签所在的字符串。

任何帮助将不胜感激。提前谢谢你。

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

这是行高：由于一行与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>

Answer 2

在您的 CSS 中，您的行高为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>