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

Question

我想在 div 中显示多行文本。 我正在使用 jquery 函数 .html(js string) 将 javascript 字符串分配给名为 question 的 div 类。 在这个字符串中，我使用了
一旦字符串被分配给 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

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