white-space,word-break,word-wrap(overflow-wrap) 估计是 CSS 里最基本又最让人迷惑的三个属性了, 我也是用了 n 次都经常搞混, 必须系统整理一下, 今天我们就把这三个属性彻底搞清楚!
测试代码
(文末有本文中所有例子的代码) 下面是本文中用于测试三个样式属性展现情况的 html 代码:
- <div id="box">
- Hi ,
- This is a incomprehensibilities long word.
- </br>
你好 & nbsp; ,
这 是一个不可思议的长单词
</div > 复制代码
现在只给了它一个宽度和边框, 没有其它任何样式, 下面是它目前的展现情况:
可以看到, nbsp; 和 </br > 可以正常发挥作用, 而连续的空格会被缩减成一个 (比如 This 和 is 之间的三个空格变成了一个), 换行符也全都无效. 句子超过一行后会自动换行, 而长度超过一行的单个单词会超出边界.
接下来我们看下, 给它上面三个 css 属性赋值后会出现什么变化.
white-space
正如它的名字, 这个属性是用来控制空白字符的显示的, 同时还能控制是否自动换行. 它有五个值: normal | nowrap | pre | pre-wrap | pre-line. 因为默认是 normal, 所以我们主要研究下其它四种值时的展现情况.
(为了方便比较, 下文所有图, 左侧为 normal 即初始情况, 右侧为赋上相应值时的情况)
先看下 white-space:nowrap 时的情况:
不仅空格被合并, 换行符无效, 连原本的自动换行都没了! 只有 </br > 才能导致换行! 所以这个值的表现还是挺简单的, 我们可以理解为永不换行.
white-space:pre:
空格和换行符全都被保留了下来! 不过自动换行还是没了. 保留, 所以 pre 其实是 preserve 的缩写, 这样就好记了.
white-space:pre-wrap:
显然 pre-wrap 就是 preserve+wrap, 保留空格和换行符, 且可以自动换行.
white-space:pre-line:
空格被合并了, 但是换行符可以发挥作用, line 应该是 new line 的意思, 自动换行还在, 所以 pre-line 其实是 preserve+new line+wrap.
我整理了一个表予以总结:
是否能发挥作用 | 换行符 | 空格 | 自动换行 | </br>、nbsp; |
---|---|---|---|---|
normal | × | ×(合并) | √ | √ |
nowrap | × | ×(合并) | × | √ |
pre | √ | √ | × | √ |
pre-wrap | √ | √ | √ | √ |
pre-line | √ | ×(合并) | √ | √ |
来源: https://juejin.im/post/5b8905456fb9a01a105966b4