overflow-wrap

类样式

类	样式
`wrap-break-word`	`overflow-wrap: break-word;`
`wrap-anywhere`	`overflow-wrap: anywhere;`
`wrap-normal`	`overflow-wrap: normal;`

wrap-break-word

overflow-wrap: break-word;

wrap-anywhere

overflow-wrap: anywhere;

wrap-normal

overflow-wrap: normal;

示例(Examples)

¥Examples

单词中间换行(Wrapping mid-word)

¥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)

¥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:

这对于将文本封装在 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)

¥Wrapping normally

使用 wrap-normal 工具仅允许在自然换行点（例如空格、连字符和标点符号）处换行：

¥Use the wrap-normal utility to only allow line breaks at natural wrapping points, like spaces, hyphens, and punctuation:

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

响应式设计(Responsive design)

¥Responsive design

在 overflow-wrap 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅变体文档详细了解如何使用变体。

示例(Examples)

单词中间换行(Wrapping mid-word)

任意位置换行(Wrapping anywhere)

正常换行(Wrapping normally)

响应式设计(Responsive design)

目录