1. 字体
  2. word-break

字体

word-break(断词)

用于控制元素中的断词方式的工具类。

ClassStyles
break-normal
word-break: normal;
break-all
word-break: break-all;
break-keep
word-break: keep-all;

示例

正常断词

使用 break-normal 工具类只在正常的断词点添加换行:

英语主要词典中最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis,这个词指的是一种由于吸入非常细小的火山硅石颗粒而导致的肺部疾病;从医学角度来说,它与矽肺病是相同的。

<p class="break-normal">英语主要词典中最长的单词是...</p>

全部断词

使用 break-all 工具类在需要时添加换行,不尝试保持完整单词:

英语主要词典中最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis,这个词指的是一种由于吸入非常细小的火山硅石颗粒而导致的肺部疾病;从医学角度来说,它与矽肺病是相同的。

<p class="break-all">英语主要词典中最长的单词是...</p>

保持断词

使用 break-keep 工具类可以防止对中文/日文/韩文(CJK)文本应用换行:

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

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

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

响应式设计

Prefix a word-break utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy