1. 排版
  2. 分词

Quick reference

属性
break-normaloverflow-wrap: normal; word-break: normal;
break-wordsoverflow-wrap: break-word;
break-allword-break: break-all;
break-keepword-break: keep-all;

基本用法

¥Basic usage

普通

¥Normal

使用 break-normal 仅在正常分词点添加换行符。

¥Use break-normal to only add line breaks at normal word break points.

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 ...">...</p>

断词

¥Break Words

如果需要,使用 break-words 在字中间添加换行符。

¥Use break-words to add line breaks mid-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="break-words ...">...</p>

中断一切

¥Break All

使用 break-all 在必要时添加换行符,而不是试图保留整个单词。

¥Use break-all to add line breaks whenever necessary, without trying to preserve whole words.

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 ...">...</p>

中断保持

¥Break Keep

使用 break-keep 可防止换行符应用于中文/日文/韩文 (CJK) 文本。对于非 CJK 文本,break-keepbreak-normal 具有相同的行为。

¥Use break-keep to prevent line breaks from being applied to Chinese/Japanese/Korean (CJK) text. For non-CJK text break-keep has the same behavior as break-normal.

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

<p class="break-keep ...">...</p>

有条件地应用

悬停、聚焦和其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用hover:break-all 仅在 hover 时应用 break-all 工具。

<p class="break-normal hover:break-all">
  <!-- ... -->
</p>

有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。

断点和媒体查询

你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:break-all 仅在中等屏幕尺寸及以上时应用 break-all 工具。

<p class="break-normal md:break-all">
  <!-- ... -->
</p>

要了解更多信息,请查看有关 响应式设计暗黑模式、以及 其他媒体查询修饰符 的文档。