overflow-wrap

overflow-wrap

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

Class Styles

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">主要英语词典中最长的单词是...</p>

wrap-anywhere 工具类的行为与 wrap-break-word 类似，不同之处在于浏览器在计算元素的固有尺寸时会考虑单词中间的换行：

这对于在 flex 容器内换行文本非常有用，通常你需要在子元素上设置 min-width: 0 以允许其缩小到内容尺寸以下。

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

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

<p class="wrap-normal">The longest word in any of the major...</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.