CSS换行和词边界详解 white-space,word-break,word-wrap,overflow-wrap 有什么区别

word-break,word-wrap,white-space,在换行中是经常使用的几个CSS属性,先来看看这几个属性的具体含义是什么。

white-space

空格换行规则,用来控制是否换行及一些换行的规则。也决定了其他换行属性是否有效,取值:

  • normal  默认,在有空格的地方换行,也就是能换行的时候才换行

  • pre 预设置,不受样式控制,只受你写的代码控制,代码里的换行字符符才会换行,这个取值经常用在代码高亮,其他换行属性控制。

  • nowrap 不换行,和词义一样,就是不换行,一但设置当前值,其他换行属性则失效。

  • pre-wrap 预设置换行,和pre一样,但会和normal一样受其他换行属性控制。

  • break-spaces 空间换行,和pre-wrap一样,除了空格字符外,其他字符也会进行换行。

  • pre-line 预设置行,和normal一样,代码中的换行字符会预先进行换行。

word-break

断词规则,white-space

  • normal 默认值,对于CJK(中日韩字符)来说每个字符都可以换行,对于非CJK来说只有空格才换行,所以如果你的代码中有可能有一串长数字或是一串长英文字符,就不能使用normal属性了。

  • keep-all  保持完整,遇到空格、标点等能换行的字符才会换行,没有就不换行。

  • break-all  遇到边界就换行,不管你是不是一个词。

  • break-word 按词换行,也就是优先对空格进行换行。这个值已经作废了,但对于有的浏览器来说,还是生效的,但还是不推荐使用,可以使用 word-break: normal 和 overflow-wrap: anywhere 来代码,效果一样。

word-wrap / overflow-wrap

字符溢出规则,当前属性需要生效,也需要white-space属性允许换行才可以。

  • normal 默认值,有点类似word-break: normal,在写样式的时候需要注意设置换行属性。

  • anywhere 任意换行,超过内容长度就会断词换行。

  • break-word 断词,和anywhere属性一样,会优先单词完整性,再考虑任意位置换行,

注:word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

兼容性

对于overflow-wrap: anywhere 下面来看看它的兼容性如何

https://img.cssjs.cn/upload/0f247ecea2d2692b86b48ce87e1a0fe8.png

关闭(Esc)