如何在HTML中换行而不使用<br>标签

​​CSS​​

#box {
white-space: pre-wrap;
}

设置​​line-space​​​为​​pre​​可以保留元素文本中的换行和空格序列。因此，第一行中单词之间的4个空格也随着换行一起显示出来。

请注意，用于文本缩进的空格也会在输出中显示，给容器添加额外的左内边距。

使用​​white-space: pre-wrap​​换行

当​​white-space​​​设置为​​pre-wrap​​​时，还可以通过包含​​\\n​​​字符来显示换行，将该字符分配给​​[innerHTML]()​​​或​​[innerText]()​​属性。

​​JavaScript​​

const box = document.getElementById('box');

box.innerText = 'JavaScript tutorial at \\n Coding Beauty';

没有​​white-space: pre-wrap​​时，输出将如下：

使用​​white-space: pre​​换行

我们还可以使用​​white-space​​​属性将其设置为​​pre​​​，以显示没有​​
​​​标签的换行。​​pre​​​与​​pre-wrap​​​的行为非常相似，但文本不会像​​pre-wrap​​​或默认值​​normal​​一样自动换行。

例如，让我们将​​#box​​​容器的宽度减少到​​200px​​​，以观察其使用​​pre​​的溢出行为。

​​HTML​​