CSS属性探秘系列(一)：word-break与word-wrap

一、浏览器的自动换行功能

各大浏览器在显示文本时，都具备自动换行的功能。当文本到达浏览器或div元素的右端时，会自动进行换行。关于换行的情况如下：

1. 对于非CJK（中日韩）字符：会在半角空格或连字符(-)位置自动换行，不会在中途长单词之间强行换行。

2. 对于CJK字符：可以在任何一个CJK字体后自由换行。

3. 当CJK中包含non-CJK部分时，将按照non-CJK的换行规则进行处理。

4. 当CJK文本中含有标点符号时，浏览器会避免将标点符号置于行首，通常会将标点符号与前一字符组合，一同进行换行。

二、word-break属性的细节与浏览器兼容性

浏览器在处理文本换行时，还会受到CSS的word-break属性影响。该属性有多个值，包括normal、keep-all、break-all等。不同浏览器对于这些值的支持情况有所不同。例如，对于keep-all属性，IE浏览器会在半空格、连接符或任何标点符号处换行，而Chrome和Safari则不支持此属性，会采用默认换行。

三、word-wrap属性及其作用

除了word-break属性，还有word-wrap属性，其取值包括normal和break-word。normal是在半空格、连接符位置换行，而break-word则允许在长单词（如URL地址）内部断行。这一属性在所有浏览器中均得到支持。

四、实例演示

为了更好地理解上述理论，我们可以看一个实例。在一段文本中，通过不同的CSS类（如keepall、breakall、breakword），模拟不同样式下的文本换行情况。通过这个实例，我们可以观察到keep-all在不同浏览器中的兼容性问题，以及特殊符号处的换行情况。

五、word-break:break-all与word-wrap:break-word的区别

这两者都是用来控制文本换行的CSS属性，但它们的区别在于处理长单词和标点符号的方式。具体区别可以通过上述实例进行说明。

想要了解更多关于word-break属性的信息，可以参考Mozilla开发者中心的文档。还有一个名为“cambrian.render('body')”的链接似乎指向某个特定资源或功能，但由于缺少上下文信息，无法确定其具体作用。