css之white-space

作用

指明浏览器如何对待空白符。

属性值

normal

1. 去掉首尾空白符
2. 合并连续空白符
3. 将换行符和制表符转换为空白符，然后再执行2
4. 自动换行

nowrap

在normal的基础上，关闭自动换行

pre

1. 保留首尾空格
2. 不合并连续的空格
3. 不转换换行符和制表符为空格
4. 关闭自动换行

pre-wrap

在pre的基础上开启自动换行，属性值名上已经明示了。

pre-line

1. 去掉首尾空白符
2. 合并连续空白符

应用场景

保留内容的原本格式 pre

比如诗歌类的内容，需要保持原样输入，那么给容器加上white-space: pre；就能很好的实现。

使用横向滚动条来展示长文本 nowrap

我们可以通过给容器加上white-space: nowrap和overflow: auto，来使容器出现横向滚动条，从而在一行上展示长文本。

注意事项

自动换行:
根据容器宽度自动换行

主动换行：


换行标签
用于html中

\n
换行符
用于js字符串中