overflow-wrap

用于控制溢出元素内单词换行的工具类。

快速参考

类	属性
wrap-break-word	overflow-wrap: break-word;
wrap-anywhere	overflow-wrap: anywhere;
wrap-normal	overflow-wrap: normal;

示例

在单词中间换行

使用 wrap-break-word 工具类，在需要时允许在单词的字母之间换行：

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<!-- [!code classes:wrap-break-word] -->
<p class="wrap-break-word">The longest word in any of the major...</p>

任意位置换行

wrap-anywhere 工具类的行为与 wrap-break-word 类似，不同之处在于浏览器在计算元素固有尺寸时会把单词中间的换行考虑进去：

wrap-break-word

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

wrap-anywhere

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

<!-- [!code classes:wrap-anywhere,wrap-break-word] -->
<div class="flex max-w-sm">
  <img class="size-16 rounded-full" src="/img/profile.jpg" />
  <div class="wrap-break-word">
    <p class="font-medium">Jay Riemenschneider</p>
    <p>jason.riemenschneider@vandelayindustries.com</p>
  </div>
</div>
<div class="flex max-w-sm">
  <img class="size-16 rounded-full" src="/img/profile.jpg" />
  <div class="wrap-anywhere">
    <p class="font-medium">Jay Riemenschneider</p>
    <p>jason.riemenschneider@vandelayindustries.com</p>
  </div>
</div>

这在 flex 容器内换行文本时很有用，通常你需要在子元素上设置 min-width: 0，才能让它缩小到内容尺寸以下。

正常换行

使用 wrap-normal 工具类只在空格、连字符和标点等自然换行点换行：

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<!-- [!code classes:wrap-normal] -->
<p class="wrap-normal">The longest word in any of the major...</p>

响应式设计

使用 md: 等断点变体作为 overflow-wrap 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

<p class="wrap-normal md:wrap-break-word ...">
 Lorem ipsum dolor sit amet...
</p>

更多关于变体的用法，请参阅变体文档。