字符串模板-不显示新行 [英] String template - new line doesn't show

问题描述

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

I'm trying to use a template string to update infoDiv's text and for some reason all this text is in one line. What am I doing wrong? None of these solutions work - they're just rendered.

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

我在此处找到了CSS解决方案(空白:前行； ).

I found a CSS solution here (white-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>

推荐答案

使用空白 CSS属性设置div的样式.

Style the div with white-space CSS property.

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?`

<div id="infoDiv" style="white-space: pre-wrap"></div>

这篇关于字符串模板-不显示新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！