`truncate` Gotcha: Single Line Limitation

Standard `truncate` (Correct Single-Line Usage)

This is a long string of text designed to show `truncate` working correctly. It will stay on one line and end with "..." because it's too long for this w-80 container.

The "Gotcha": `truncate` and Multi-Line Hopes

This is a very, very long piece of text. Some users might mistakenly expect `truncate` to allow this text to wrap for a couple of lines and then show an ellipsis. However, standard `truncate` will force this entire block into a single line due to its `white-space: nowrap` property, and then truncate *that single line*. It does not provide multi-line clamping.

Important Note (The Gotcha): The `truncate` utility is for single-line text truncation only . It achieves this by applying `overflow: hidden;`, `text-overflow: ellipsis;`, and `white-space: nowrap;`.

If you need to truncate text after it has wrapped to a specific number of lines (e.g., show "..." after 2 or 3 lines), the `truncate` class alone is not sufficient. For that, you would need a solution like the official `@tailwindcss/line-clamp` plugin .

Reference: Text Without `truncate` (Normal Wrapping)

This significantly lengthy text, without any `truncate` class applied, will simply wrap naturally to multiple lines within its w-80 container. This serves as a clear comparison to illustrate what `truncate` changes.