排版
overflow-wrap
用于控制溢出元素中字内换行的工具。
| 类 | 样式 |
|---|---|
wrap-break-word | overflow-wrap: break-word; |
wrap-anywhere | overflow-wrap: anywhere; |
wrap-normal | overflow-wrap: normal; |
示例(Examples)
单词中间换行(Wrapping mid-word)
使用 wrap-break-word 工具在必要时允许单词中的字母换行：
🌐 Use the wrap-break-word utility to allow line breaks between letters in a word if needed:
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>任意位置换行(Wrapping anywhere)
wrap-anywhere 工具的行为类似于 wrap-break-word，不同之处在于浏览器在计算元素的内在大小时会考虑单词中间的换行：
🌐 The wrap-anywhere utility behaves similarly to wrap-break-word, except that the browser factors in mid-word line breaks when calculating the intrinsic size of the element:
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 容器内时非常有用，通常你需要在子元素上设置 min-width: 0，以允许其缩小到低于内容尺寸的大小。
🌐 This is useful for wrapping text inside of flex containers, where you would usually need to set min-width: 0 on the child element to allow it to shrink below its content size.
正常换行(Wrapping normally)
使用 wrap-normal 工具仅在自然换行点（如空格、连字符和标点符号）处允许换行：
🌐 Use the wrap-normal utility to only allow line breaks at natural wrapping points, like spaces, hyphens, and punctuation:
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>响应式设计(Responsive design)
在 overflow-wrap 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<p class="wrap-normal md:wrap-break-word ..."> Lorem ipsum dolor sit amet...</p>请参阅 变体文档 详细了解如何使用变体。