彻底搞懂word-break、word-wrap、white-space

white-space   这个属性是用来控制空白字符的显示的

word-break

这个属性是控制单词如何被拆分换行的。它有三个值:normal | break-all | keep-all。

word-break: keep-all  所有“单词”一律不拆分换行

注意,我这里的“单词”包括连续的中文字符(还有日文、韩文等),或者可以理解为只有空格可以触发自动换行。

word-break: break-all  所有单词碰到边界一律拆分换行

不管你是incomprehensibilities这样一行都显示不下的单词,还是long这样很短的单词,只要碰到边界,都会被强制拆分换行。所以用 word-break: break-all 时要慎重呀

word-wrap(overflow-wrap)

这个属性也是控制单词如何被拆分换行的,实际上是作为 word-break 的互补,它只有两个值:normal | break-word

只有当一个单词一整行都显示不下时,才会拆分换行该单词

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

所以我觉得 overflow-wrap 更好理解好记一些,overflow,只有长到溢出的单词才会被强制拆分换行!

(其实前面的 word-break 属性除了列出的那三个值外,也有个 break-word 值,效果跟这里的 word-wrap: break-word 一样,然而只有Chrome、Safari等部分浏览器支持)

总结

最后总结一下三个属性

  • white-space控制空白字符的显示,同时还能控制是否自动换行。它有五个值:normal | nowrap | pre | pre-wrap | pre-line

  • word-break控制单词如何被拆分换行。它有三个值:normal | break-all | keep-all

  • word-wrap(overflow-wrap):控制长度超过一行的单词是否被拆分换行。是word-break的补充,它有两个值:normal | break-word

  • 相关地址:https://blog.csdn.net/yuqing1008/article/details/103523243

  • https://blog.csdn.net/jdbdh/article/details/83687049

(0)

相关推荐