如何在 CSS 中定义 word-break 属性以允许单词继续到下一行？

在网页排版中，当一段文字中的单词长度超过行宽时，浏览器会默认将单词截断分行。然而，有时我们需要让单词整个保留在同一行上，而不是被截断到下一行。这时我们可以使用 CSS 的 word-break 属性来定义是否允许在单词内部换行，以及换行的方式。

word-break 属性的值

word-break 属性的值有以下几种：

• normal：默认值，按照规定的字词换行，如果单词长度超过了行宽则自动换行。
• break-all：允许在单词内换行，只要行宽不够用就可以进行换行。
• keep-all：与 normal 相似，但是不会在 CJK（中日韩）文字之间进行换行，只有在单词内换行。

实例演示

以下是一段 HTML 代码，其中的文本超过了行宽，导致单词被截断而无法全部显示：

<p>如果我们不设置 word-break，非常长的单词会被截断，导致不美观。</p>

如果我们将 CSS 代码设为 word-break: break-all，则单词会被允许在内部换行，而不是被截断到下一行：

p {
    width: 100px;
    word-break: break-all;
}

显示效果如下：

如果我们不设
置 word-break，非
常长的单词会被
截断，导致不美观。

如果我们将 CSS 代码设为 word-break: keep-all，则单词仍会被截断，但是会保持在同一行内：

p {
    width: 100px;
    word-break: keep-all;
}

显示效果如下：

如果我们
不设置
word-break，非
常长的单词会被
截断，导致不美观。

小结

通过设置 word-break 属性，我们可以控制网页中单词的换行方式。在一些需要显示较长单词的场景，使用 word-break 属性可以让排版更加美观。在使用此属性时，应根据实际需要选择合适的值。