css之white-space

作用

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

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

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

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

pre-wrap
在pre的基础上开启自动换行

pre-line
去掉了pre的保留首尾空格和不合并连续的空格
去掉首尾空格
合并连续空格

应用场景1：
避免菜单项自动换行
使用nowrap实现该功能

<nav>
  <a href="...">链接1</a>
  <a href="...">链接1</a>
  <a href="...">链接1</a>
  <a href="...">链接1</a>
</nav>

nav a {
  white-space: nowrap;
}

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

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