CSS样式word-wrap和word-break的区别

CSS样式word-wrap和word-break的区别

word-wrap:

css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

word-break:

css的 word-break 属性用来标明怎么样进行单词内的断句。

normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

当浏览器默认的时候，不加word-wrap或word-break，如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去。

如：

添加word-break：break-all 后

word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是，它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。

而word-break:break-all断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。

暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。

总之，如果您想更节省空间，那就用word-break:break-all。