字符串模板 - 不显示新行

时间:2017-05-02 03:25:36

标签: javascript ecmascript-6

我正在尝试使用模板字符串来更新infoDiv的文本,并且出于某种原因,所有这些文本都在一行中。我究竟做错了什么? these解决方案都不起作用 - 它们只是渲染。

infoDiv.textContent = `Hi!
It's a ${counter} question quiz.
It takes about ${time_minutes} minutes to solve it.
Are you ready?`

编辑:

我找到了一个CSS解决方案herewhite-space: pre-line;)。

let counter = 8;
let time_minutes = 3;

infoDiv.textContent = `Hi!
It's a ${counter} question quiz.
It takes about ${time_minutes} minutes to solve it.
Are you ready?`
<div id="infoDiv" style="white-space: pre-line"></div>

1 个答案:

答案 0 :(得分:4)

使用white-space CSS属性设置div的样式。

&#13;
&#13;
const counter = 22;
const time_minutes = 60;

infoDiv.textContent = `Hi!
It's a ${counter} question quiz.
It takes about ${time_minutes} minutes to solve it.
Are you ready?`
&#13;
<div id="infoDiv" style="white-space: pre-wrap"></div>
&#13;
&#13;
&#13;