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.
<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
<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 containers）内换行文本很有用，通常您需要在子元素上设置 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.
<p class="wrap-normal">The longest word in any of the major...</p>
响应式设计
在 overflow-wrap 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：
<p class="wrap-normal md:wrap-break-word ...">
Lorem ipsum dolor sit amet...
</p>
在 变体文档 中了解更多关于使用变体的信息。