Typography

word-break

用於控制元素內文字斷行方式的通用類別。

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

範例(Examples)

正常(Normal)

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

全部斷行(Break All)

使用 break-all 通用類別在必要時加入換行,而不嘗試保留完整的單字:

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

保持完整(Break Keep)

使用 break-keep 通用類別防止對中文/日文/韓文(CJK)文字進行斷行:

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

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

對於非 CJK 文字,break-keep 通用類別的行為與 break-normal 通用類別相同。

響應式設計(Responsive design)

word-break 通用類別前面加上像 md: 這樣的中斷點變體,讓該通用類別只在中型螢幕尺寸及以上時套用:

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

變體文件中了解更多關於使用變體的資訊。

Copyright © 2026 Tailwind Labs Inc.·商標政策(Brand)