overflow-wrap

overflow-wrap

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

类名样式

wrap-break-word

overflow-wrap: break-word;

wrap-anywhere

overflow-wrap: anywhere;

wrap-normal

overflow-wrap: normal;

示例

使用 wrap-break-word 实用程序，以便在需要时允许单词中字母之间换行

在主要的英语词典中，最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis, 这个词指的是因吸入非常细小的二氧化硅颗粒（特别是火山灰）而感染的肺部疾病；在医学上，它与矽肺病相同。

<p class="wrap-break-word">The longest word in any of the major...</p>

wrap-anywhere 实用程序行为类似于 wrap-break-word，不同之处在于浏览器在计算元素的固有大小时，会将单词中间的换行符考虑在内

这对于在 flex 容器内包裹文本非常有用，在 flex 容器中，您通常需要在子元素上设置 min-width: 0 以允许其缩小到内容大小以下。

使用 wrap-normal 实用程序仅允许在自然的换行点（如空格、连字符和标点符号）处换行

<p class="wrap-normal">The longest word in any of the major...</p>

前缀an overflow-wrap 实用程序带有断点变体，例如 md:，仅在以下情况下应用该实用程序中等屏幕尺寸及以上

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

了解有关在变体文档中使用变体的更多信息。