word-break

语法：

word-break：normal | keep-all | break-all | break-word

默认值：normal

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

相关属性：word-wrap/overflow-wrap

媒　体：视觉

取值：

normal：
默认的换行规则。依据各自语言的规则，允许在字间发生换行。
keep-all：
对于 CJK（中文，韩文，日文）文本不允许在字符内发生换行。Non-CJK 文本表现同normal
break-all：
对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字符断行。
break-word：
与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与word-wrap的break-word值效果相同

说明：

定义元素内容文本的字间与字符间的换行行为。
  • 作为IE的私有属性之一，IE5.5率先实现了word-break，后期被w3c采纳成标准属性；
  • 对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all | break-word属性值；

  • 同为强制打断单词的break-all与break-word的两个值，需要了解她们间的主要区别（下述2个示例需要在webkit/blink浏览器下查看）：

    break-all：

    做一个示例让大家更好的区分wordbreakbreakword与wordbreakbreakall的实际应用效果
    .test1 { word-break: break-all; }

    break-all会在文本内容遇见边界时，强制将文本打断换行，而不考虑单词是否是完整的一个单位

    break-word：

    做一个示例让大家更好的区分wordbreakbreakword与wordbreakbreakall的实际应用效果
    .test2 { word-break: break-word; }

    break-word同样也会在文本内容遇见边界时，强制将文本打断换行，不同的在于它会考虑单词是否完整，如果当前行无法放下需要被打断的单词，为了保持完整性，会将整个单词放到下一行进行展示

  • 对应的脚本特性为：wordBreak。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
keep-all 8.0+ 40.0+ 40.0-43.0 8.0 40.0+ 8.0-8.4 4.4-43.0 28.0-43.0
44.0+ 9.0+ 9.0+ 44.0+ 44.0+
break-word #1 8.0-16.0 40.0-58.0 40.0-43.0 8.0 40.0+ 8.0-8.4 4.4-43.0 28.0-43.0
44.0+ 9.0+ 9.0+ 44.0+ 44.0+
  1. Safari, Chrome, Opera 以及其他 WebKit/Blink 内核浏览器还支持break-word属性值，不过对于版本的支持性，上述表格数据不一定准确。

示例：