word-break 和 word-wrap 中的 break-word 的用法详解
word-wrap
和 word-break
的区别在于
word-break
MDN 和 W3C 标准中都将 break-word
归为废弃的值,只是为了兼容遗留版本,所以没有删除( [W3C#word-break]](https://www.w3.org/TR/css-text-3/#word-break) ), 而且兼容性较差,比如较老的 Firefox(< v67,也就是去年之前的版本 https://hg.mozilla.org/mozilla-central/rev/c1075c1f1605) 就不支持 break-word
,IE 也不支持。W3C 的解释为
TIP
For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.
也就是说 W3C 将 word-break: break-word
解释为 word-break: normal; overflow-wrap: anywhere;
的集合,但是 overflow-wrap: anywhere
兼容性又很一般。
word-wrap
- Chrome 中使用
word-wrap: break-word;
会有中划线显示(如下图),但是其实是生效了的,MDN 对此的解释是:TIP
注:word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
overflow-wrap
相比于word-wrap
,多了anywhere
的值,不过正如上面所讲的,这个值的兼容性比较差,所以暂不建议使用。 word-wrap: break-word;
在 Chrome 中使用时的中划线如何去除:overflow-wrap: break-word; word-wrap: break-word;
- 当
word-wrap
使用在flex
布局中时,会存在失效的情况
解决方式为,给 flex item 元素添加min-width: 0;
即可 查看、查看
总结
- 对于大部分的留白换行方式:
word-wrap: break-word; word-break: break-word;
- 对于部分需要强制所有单词折行的
word-break: break-all;