Part 30: Text Transforms, Decorations & Line-Clamp

Formatting long text strings and applying typographic decorations.

1. Text Transforms

• uppercase: ALL CAPS.
• lowercase: all lowercase.
• capitalize: Capitalizes The First Letter Of Each Word.
• normal-case: Preserves original casing.

2. Single-Line vs Multi-Line Truncation

Single-Line Truncation (truncate):

Applies overflow: hidden; text-overflow: ellipsis; white-space: nowrap;:

<p class="truncate max-w-xs">
  A very long document title that will automatically show three dots at the end...
</p>

Multi-Line Truncation (line-clamp-*):

Truncates text after a specific number of lines: - line-clamp-1 - line-clamp-2 - line-clamp-3

<p class="line-clamp-2 text-slate-600 text-sm">
  This is a blog preview card excerpt. Even if the author wrote three paragraphs of text, Tailwind will cleanly cut it off after exactly two lines with an ellipsis.
</p>

Key Takeaways

• Use truncate for single-line text overflows.
• Use line-clamp-2 or line-clamp-3 for blog post excerpts.

In Part 31, we will master Gradients: Linear Gradients, Color Stops & Radial Effects!