Correct single-line truncation:
This is a long piece of text intended for a single line. If it's too long for its container, Tailwind's `truncate` class will correctly add an ellipsis (...).
Text that naturally wraps (without `truncate`):
This is a much longer paragraph of text. Without any truncation utilities, this text will naturally wrap onto multiple lines to fit within the width of its container. This demonstrates standard text flow.
Gotcha: `truncate` on multi-line capable text:
This is a much longer paragraph of text. If we apply `truncate` here, hoping for a multi-line ellipsis (e.g., after 2 lines), it won't work as expected. The `truncate` class forces the text into a single line first, then applies the ellipsis. It does not provide multi-line ellipsis.
Important Note (Gotcha): The `truncate` utility is designed for single-line text truncation. It combines `overflow-hidden`, `text-overflow: ellipsis`, and `white-space: nowrap`. The `white-space: nowrap` property is what prevents the text from wrapping to multiple lines.
For truncating text after a specific number of lines (e.g., 2 or 3 lines) and showing an ellipsis, Tailwind CSS requires the use of the official
@tailwindcss/line-clamp
plugin. After installing and configuring the plugin, you can use classes like
line-clamp-2
,
line-clamp-3
, etc.
(This example cannot demonstrate `line-clamp` directly as it requires plugin installation, but it's the recommended solution for multi-line truncation.)