排版
overflow-wrap
用于控制溢出元素中文字换行的工具。
| Class | Styles |
|---|---|
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">在所有主要的英语字典中，最长的单词是...</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 容器内包裹文本时非常有用，通常需要在子元素上设置 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">在所有主要的英语字典中，最长的单词是...</p>响应式设计
Prefix an overflow-wrap utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="wrap-normal md:wrap-break-word ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.