word-break 与 word-wrap

break-word会对过长的单词做词内断词处理，这样单词始终会在容器中，不会溢出容器
break-all很暴力的一种处理方法，过长单词先断词处理，占满一行，然后再换行处理

每次看到这两个css属性都是一种眼晕的感觉，今天就来总结一下。

首先我们来来分别介绍一下这两个属性有哪些值：

word-break:

值	描述
break-all	允许单词内换行
keep-all	只在半角或连字符处换行（兼容性不好）
normal	默认

 

word-wrap:

值	描述
break-word	在长单词或者URL的地址内部进行换行
normal	只允许断字处换行，默认

 

因为word-break:keep-all兼容性不好，所以不推荐使用。因此两者的主要区别还是在于break-all与break-word。

从字面意思上看区别显而易见：

• break-word会对过长的单词做词内断词处理，这样单词始终会在容器中，不会溢出容器，

• break-all很暴力的一种处理方法，过长单词先断词处理，占满一行，然后再换行处理，然而这样解释还不是太清晰。那就写一个demo看一下效果。

同时说明一下，英文默认是不换行的,会造成溢出。
中文会默认换行，如果要不换行则需要设置：white-space:nowrap;
chrome浏览器中的中文标点不能位于一行的开头，因此会将标点的前一个字也换行,如果前一个也是标点依次往前找，直到找到不是标点的那个字为止（如每个例子的第一行）;
中文遇英文，如果一行容不下则英文直接整段换行（例第二个demo的第二行）；

本篇到此结束，如有不足，之后再进行补充。

我的个人博客,有空来坐坐