Tailwind CSS home page
  1. 排版
  2. 单词中断

Quick reference

Class
Properties
break-normaloverflow-wrap: normal; word-break: normal;
break-wordsoverflow-wrap: break-word;
break-allword-break: break-all;
break-keepword-break: keep-all;

基础用法

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

拆分单词

如果需要，使用 break-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-words ...">...</p>

全部拆分

在必要时使用 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 ...">...</p>

拆分保持

使用 break-keep 可防止将换行符应用于中文/日文/韩文 (CJK) 文本。对于非 CJK 文本，break-keep 的行为与 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>

详细了解, 请参考 Hover, Focus, & Other States 文档.

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:break-all 来应用 break-all 程序，适用于中等屏幕尺寸及以上。

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

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.