文本处理之换行及word-break和word-wrap属性详解

中文换行

中文换行比较简单，这一行放不下就换行。除了中文之外，韩文和日文的处理也是一样的。这三种文字合在一起就是MDN介绍word-break属性时提到的“中文、韩文和日文”（CJK）。

英文换行

英文换行比中文复杂一些。英文单词之间有空格，所以单词之间的换行比较简单。但是，单词内部的换行就比较复杂了。

word-break属性

word-break属性用于控制文本的换行行为。它有以下几个取值：

• normal：这是默认值。文本会在单词边界处换行。
• break-all：文本会在每个字符处换行。
• keep-all：文本不会换行。
• word-break-all：文本会在单词内部换行。

word-wrap属性

word-wrap属性用于控制文本的自动换行。它有以下几个取值：

• normal：这是默认值。文本不会自动换行。
• break-word：文本会在单词内部自动换行。
• none：文本不会自动换行。

使用word-break和word-wrap属性

word-break和word-wrap属性可以一起使用来控制文本的换行行为。

• 如果想让文本在单词边界处换行，可以使用normal。
• 如果想让文本在每个字符处换行，可以使用break-all。
• 如果想让文本不会换行，可以使用keep-all。
• 如果想让文本在单词内部换行，可以使用word-break-all。
• 如果想让文本自动换行，可以使用break-word。
• 如果想让文本不会自动换行，可以使用none。

举个例子

以下代码演示了word-break和word-wrap属性的用法：

<p style="word-break: break-all;">This is a long word that will be broken into multiple lines.</p>
<p style="word-wrap: break-word;">This is a long word that will also be broken into multiple lines, but only if it is too long to fit on one line.</p>

第一个例子中的文本会在每个字符处换行，第二个例子中的文本会在单词内部自动换行。

浏览器兼容性

word-break和word-wrap属性在所有主流浏览器中都得到支持。

总结

word-break和word-wrap属性可以用来控制文本的换行行为。word-break属性用于控制文本在单词边界处、每个字符处还是单词内部换行，而word-wrap属性用于控制文本是否自动换行。