1. 排版
  2. word-break

排版

word-break

用于控制元素内断词行为的实用工具。

类名样式
break-normal
word-break: normal;
break-all
word-break: break-all;
break-keep
word-break: keep-all;

示例

正常

使用 break-normal 实用工具仅在正常的断词点添加换行符

在主要英语词典中最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis, 这个词指的是因吸入非常细小的二氧化硅颗粒(特别是火山灰)而引起的肺部疾病;在医学上,它与矽肺病相同。

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

全部打断

使用 break-all 实用工具在必要时添加换行符,而无需尝试保留完整单词

在主要英语词典中最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis, 这个词指的是因吸入非常细小的二氧化硅颗粒(特别是火山灰)而引起的肺部疾病;在医学上,它与矽肺病相同。

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

保持单词完整

使用 break-keep 实用工具来防止对中文/日文/韩文 (CJK) 文本应用换行符

抗衡不屈不挠 (kànghéng bùqū bùnáo) 这是一个长词,意思是不畏强暴,奋勇抗争,坚定不移,永不放弃。这个词通常用来描述那些在面对困难和挑战时坚持自己信念的人,他们克服一切困难,不屈不挠地追求自己的目标。无论遇到多大的挑战,他们都能够坚持到底,不放弃,最终获得胜利。

<p class="break-keep">抗衡不屈不挠...</p>

对于非 CJK 文本,break-keep 实用工具的行为与 break-normal 实用工具相同。

响应式设计

前缀一个 word-break 实用工具 带有断点变体,例如 md:,仅在以下情况下应用该实用工具中等 屏幕尺寸及以上

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

变体文档中了解有关使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策