开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情
在HTML中要创建一个没有<br>标签的换行，可以将文本容器的white-space属性设置为pre-wrap。例如：
HTML
CSS
#box { white-space: pre-wrap; }
设置line-space为pre可以保留元素文本中的换行和空格序列。因此，第一行中单词之间的4个空格也随着换行一起显示出来。
请注意，用于文本缩进的空格也会在输出中显示，给容器添加额外的左内边距。
使用white-space: pre-wrap换行
当white-space设置为pre-wrap时，还可以通过包含\\n字符来显示换行，将该字符分配给[innerHTML](<https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML>)或[innerText](<https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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，以显示没有<br>标签的换行。pre与pre-wrap的行为非常相似，但文本不会像pre-wrap或默认值normal一样自动换行。
例如，让我们将#box容器的宽度减少到200px，以观察其使用pre的溢出行为。
HTML
CSS
#box { white-space: pre; background-color: #e0e0e0; width: 200px; }
如果pre在这个示例中是pre-wrap：
当通过JavaScript将元素的[innerHTML](<https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML>)或[innerText](<https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText>)属性设置为字符串时，pre的行为也是相同的。
使用white-space: pre-line换行
在您希望额外的空格被忽略，但换行符在输出中显示时，将white-space设置为pre-line会派上用场。
以宽度为300px和white-space为pre-line的情况下，将如下所示：
HTML
JavaScript at Coding Beauty HTML at Coding Beauty CSS at Coding Beauty
CSS
#box { white-space: pre-line; background-color: #e0e0e0; width: 300px; }
宽度为200px时：
与之前的两个可能的white-space值一样，当使用JavaScript将元素的innerHTML或innerText属性设置为字符串时，pre-line的行为也是相同的。