轻松搞定文本换行：word-break与overflow-wrap的奥秘

前端

2023-08-23 04:31:23

文本布局的神兵利器：word-break 和 overflow-wrap 属性

在构建精美的网页时，文本排版是一门至关重要的艺术。让我们向你介绍 word-break 和 overflow-wrap 这两个神奇的 CSS 属性，它们将帮助你驾驭文本布局的复杂世界。

1. word-break 属性：打破文字的束缚

想象一个顽固的文本段落，固执地超出你精心设计的容器，破坏了你美妙的页面布局。word-break 属性就像一个文本界的破壁者，它允许你在指定的位置强制换行。

normal: 默认设置，文本会在空格、连字符或其他换行点自然地换行。
break-all: 打破所有限制，让文本在遇到任何字符时无情地换行，即使是那些悲伤的孤儿词。
keep-all: 相反，它禁止换行，即使文本像不听话的孩子一样超出容器的边缘。
break-word: 这是一个折中的选择，允许文本在单词之间换行，但不会打断任何单词。

2. overflow-wrap 属性：控制文本的溢出行为

当文本像淘气的小鬼一样从容器中溢出时，overflow-wrap 属性让你掌控大局。

normal: 默认模式，它会在文本溢出时显示礼貌的省略号 (...)，让人们知道还有更多内容。
break-word: 当文本越界时，它会毫不犹豫地换行，就像一个体操运动员在平衡木上跳跃。
anywhere: 顾名思义，它允许文本在任何地方换行，不受任何规则或限制的束缚。

3. word-break 和 overflow-wrap 的强强联手

通过将 word-break 和 overflow-wrap 结合使用，你可以实现各种文本排版效果：

防止长单词溢出: 使用 word-break: break-word 驯服那些无休无止的长单词，防止它们破坏你的页面布局。
让文本在狭窄容器中自动换行: 如果你的容器很窄，不妨使用 word-break: break-all，让文本像一条蜿蜒的小河一样自动换行。
控制文本溢出: 利用 overflow-wrap: break-word，即使文本溢出，也能保持它的整洁有序。

4. 代码示例：让文本屈服于你的意志

<div style="width: 200px;">
  <p>很长的一段文本，它自动换行了，谢谢你，word-break: normal。</p>
</div>

<div style="width: 200px;">
  <p style="word-break: break-all;">任性的长文本，你逃不过word-break: break-all的法眼。</p>
</div>

<div style="width: 200px;">
  <p style="word-break: keep-all;">stubborn text, 你无法突破word-break: keep-all的防线。</p>
</div>

<div style="width: 200px;">
  <p style="word-break: break-word;">完美的单词边界换行，这一切要归功于word-break: break-word。</p>
</div>

<div style="width: 200px; overflow-wrap: break-word;">
  <p>overflow-wrap: break-word拯救了我的文本，即使它超越了容器的界限。</p>
</div>