CSS文字换行之word-wrap和word-break的区别

CSS文字换行之word-wrap和word-break的区别

word-wrap：break-word；

word-break：break-all；

这两种都可以，区别在于英文场景中如果行末有一个很长的英文单词，word-wrap：break-word会整体换行，word-break：break-all会强制换行，使单词断开。

word-wrap与word-break的区别，以及无效情况

无效情况：

1、word-wrap对行内元素是没有效果的

2、一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap），可能是元素中设置的white-space是norwrap导致，无法换行。所以需要

white-space:normal;
word-break:break-all;

这样问题就解决了。
white-space 对程序中的空白进行处理，默认是normal （浏览器会对空白进行忽略）

3、对table 的td 标签下的元素设置word-wrap：word-break是没有效果的