word-break 与 word-wrap 的区别

CSS 中 word-break 与 word-wrap 属性介绍

CSS 中有一对容易让人混淆的规则，word-break 与 word-wrap。我们常常用它们进行换行的控制，但是很难记住二者的区别，所以非常容易出错。这段时间经常用到这两个规则，趁着机会总结一下关于它们的知识。

soft wrap opportunity

在介绍它们之前，我们先理解一个名词，soft wrap opportunity。

soft wrap opportunity，中文可以理解为“软换行机会”，是一个可供软换行操作的点，通常指单词与单词的边界，或者中文字与中文字的边界。soft wrap opportunity 与硬换行不同，它是指单词中间也可换行，但其不会产生额外的空格或间距，不会影响文本的布局和对齐。

word-break

CSS 属性 word-break 用于控制一个单词在一个容器内是否应该在行内自动换行，当单词超过容器宽度时，它允许在单词内换行。word-break 有以下几种可能的取值：

• normal：这是默认值，它允许在 soft wrap opportunity 处换行。
• break-all：此值允许在任何地方换行，包括在单词中间。
• keep-all：此值不允许在任何地方换行，即使单词超过容器宽度。
• break-word：此值允许在单词中间换行，但仅在必要的最小次数。

我们通过代码了解一下：

<div style="width: 100px; word-break: normal;">
  这是一个很长的单词，如果它不能换行的话，将会超出这个容器的宽度。
</div>

<div style="width: 100px; word-break: break-all;">
  这是一个很长的单词，即使它不能在单词边界处换行，它也会在任意位置换行，以适应这个容器的宽度。
</div>

<div style="width: 100px; word-break: keep-all;">
  这是一个很长的单词，无论如何它都不会在这个容器内换行，即使它超出了容器的宽度。
</div>

<div style="width: 100px; word-break: break-word;">
  这是一个很长的单词，如果它不能在单词边界处换行，它也会在单词中间换行，以适应这个容器的宽度，但它只会进行必要的最小次数的换行。
</div>

word-wrap

CSS 属性 word-wrap 允许您在容器内换行文本，还可以指定换行点，它具有以下几种可能的取值：

• normal：这是默认值，它允许在 soft wrap opportunity 处换行。
• break-word：此值允许在单词中间换行。
• initial：此值将 word-wrap 属性重置为其初始值。
• inherit：此值从父元素继承 word-wrap 属性的值。

<div style="width: 100px; word-wrap: normal;">
  这是一个很长的单词，如果它不能换行的话，将会超出这个容器的宽度。
</div>

<div style="width: 100px; word-wrap: break-word;">
  这是一个很长的单词，即使它不能在单词边界处换行，它也会在单词中间换行，以适应这个容器的宽度。
</div>

word-break 与 word-wrap 的区别

word-break 与 word-wrap 都是用于控制文本换行的 CSS 属性，但它们之间存在一些区别：

• word-break 主要用于控制单词是否可以在行内自动换行，而 word-wrap 则主要用于控制文本在容器内是否应该换行。
• word-break 具有 break-all、keep-all、break-word 等多个取值，而 word-wrap 只有 normal 和 break-word 两个取值。
• word-break 的 break-all 值允许在单词的任何位置换行，而 word-wrap 的 break-word 值只允许在单词中间必要的最小次数换行。

使用场景

word-break

word-break 属性通常用于以下场景：

• 需要在狭窄容器内显示长单词，避免单词超出容器宽度。
• 需要在文本框或输入框中控制文本的换行。
• 需要在多列布局中控制文本的换行。

word-wrap

word-wrap 属性通常用于以下场景：

• 需要在容器内自动换行文本，以适应容器的宽度。
• 需要在文本框或输入框中控制文本的换行。
• 需要在多列布局中控制文本的换行。

兼容性

word-break 和 word-wrap 属性在所有主流浏览器中都得到支持，但对于不同的取值，兼容性可能会略有差异。

总结

word-break 和 word-wrap 都是非常有用的 CSS 属性，它们可以帮助我们更好地控制文本的换行。在实际项目中，我们可以根据不同的需要选择合适的属性值来实现不同的效果。