- 排版
- Text Overflow
排版
Text Overflow
Utilities for controlling text overflow in an element.
Basic usage
Truncate
Use truncate to prevent text from wrapping and truncate overflowing text with an ellipsis (…) 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="truncate ...">...</p>Ellipsis
Use text-ellipsis to truncate overflowing text with an ellipsis (…) 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="text-ellipsis overflow-hidden ...">...</p>Clip
Use text-clip to truncate the text at the limit of the content area.
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="text-clip overflow-hidden ...">...</p>Applying conditionally
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:text-clip to only apply the text-clip utility on hover.
<p class="truncate hover:text-clip">
<!-- ... -->
</p>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:text-clip to apply the text-clip utility at only medium screen sizes and above.
<p class="truncate md:text-clip">
<!-- ... -->
</p>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
