`truncate` Gotcha: Single-Line Behavior

The "Gotcha"

truncate only works reliably on a single line of text. It forces text to a single line (due to white-space: nowrap ) before applying ellipsis. For multi-line text truncation (e.g., "..." after 2 or 3 lines), you need the @tailwindcss/line-clamp plugin.

Standard Single-Line Truncation

This is a very long string of text designed to demonstrate standard truncation. It will be cut off with an ellipsis because it's too long for the container.

The truncate class works as expected for this single line of text.

"Gotcha": truncate on Multi-Line Content

The truncate class includes CSS property white-space: nowrap . This forces the text onto a single line *before* applying the ellipsis. It does not create an ellipsis after a specific number of *wrapped* lines.

This is a much longer paragraph that, without 'truncate', would naturally wrap into multiple lines within this container. However, because 'truncate' inherently applies 'white-space: nowrap', the entire paragraph is first forced onto a single line, and then an ellipsis is applied at the end of that single (now very long) line. It does not show, for example, two lines of text followed by "...".

The text above, despite being a long paragraph, is forced to a single line by truncate and then an ellipsis is applied. This clearly demonstrates that truncate is intended for single-line display only.

Comparison: Multi-Line Content Without truncate

This is a much longer paragraph that, without 'truncate', would naturally wrap into multiple lines within this container. However, because 'truncate' inherently applies 'white-space: nowrap', the entire paragraph is first forced onto a single line, and then an ellipsis is applied at the end of that single (now very long) line. It does not show, for example, two lines of text followed by "...".

This is the same text as in the "Gotcha" example above, but shown in its natural wrapped state without truncate , to highlight the difference.