Tailwind CSS 12 🎨 Text Alignment, Decoration, Transformation, and Truncation - KandZ

Text styling goes beyond font family, size, and weight. Once the type scale is in place, the remaining decisions are about how text sits within its container, how it is decorated, how it is transformed, and what happens when it does not fit. These four families — alignment, decoration, transformation, and truncation — handle the details that separate text that is merely readable from text that is well presented.

Alignment controls horizontal placement and vertical rhythm. Decoration controls underlines, strikethroughs, and their styling. Transformation controls capitalization without changing the underlying data. Truncation controls what happens when text overflows its container, whether that means clipping with an ellipsis, breaking at word boundaries, or allowing horizontal scroll. Each family has its own utilities, and each interacts with layout in ways that matter for tables, cards, lists, and responsive designs.

This chapter covers the alignment utilities for both horizontal and vertical placement, the decoration utilities for underline, line-through, and their style options, the transformation utilities for uppercase, lowercase, and capitalization, and the truncation and overflow utilities that handle text that does not fit.

Key point: Text alignment uses text-left, text-center, text-right, and text-justify for horizontal placement, and align-baseline, align-top, align-middle, and align-bottom for vertical placement in inline or table contexts. Decoration uses underline, line-through, no-underline, and decoration-* for style. Transformation uses uppercase, lowercase, and capitalize. Truncation uses truncate, text-ellipsis, text-clip, and break-words to control overflow.

Why these text utilities exist

The layout problem. Text does not sit in isolation; it sits inside containers. A heading centered in a hero, a table cell aligned right, a badge aligned to the baseline of adjacent text. Alignment utilities express these relationships without custom CSS.

The decoration problem. Links are underlined by default, but a navigation link might not be. A price might have a strikethrough for the original amount. A heading might have an underline that serves as a visual accent. Decoration utilities control these choices and their styling.

The transformation problem. Data often arrives in one case and needs to display in another. A username stored as alice_nguyen might display as Alice Nguyen. An abbreviation stored as NATO might display as Nato in a heading. Transformation utilities change the display without changing the underlying data.

The overflow problem. Text that is too long for its container can break the layout. A long email address in a narrow card, a product name that exceeds its column, a file path that never breaks. Truncation utilities decide whether the text clips, wraps, scrolls, or shows an ellipsis.

The consistency problem. Each of these choices should be made systematically. If headings are centered and body text is left-aligned, that decision should apply everywhere. Utilities encode the decision at the element level, and the pattern is repeated consistently.

a. Horizontal text alignment

The text-* alignment utilities set the text-align property.

Utility	CSS	Use
`text-left`	`text-align: left`	Default for most text
`text-center`	`text-align: center`	Headings, buttons, empty states
`text-right`	`text-align: right`	Numeric columns, actions
`text-justify`	`text-align: justify`	Editorial body text
`text-start`	`text-align: start`	Logical left (respects direction)
`text-end`	`text-align: end`	Logical right (respects direction)

<h1 class="text-center">Centered Heading</h1>
<p class="text-left">Left-aligned paragraph.</p>
<td class="text-right">1,234.56</td>

The text-start and text-end utilities use logical properties, which means they flip in right-to-left languages. For internationalized applications, these are preferred over text-left and text-right.

<p class="text-start">Aligns to the start of the text direction.</p>

Alignment can be responsive, which is useful for headings that center on mobile and left-align on desktop:

<h1 class="text-center md:text-left">Responsive Heading</h1>

Justified text can create uneven word spacing, especially in narrow columns. It is best used with hyphens enabled and in wide enough containers.

<p class="text-justify hyphens-auto">Long editorial paragraph.</p>

b. Vertical alignment

The align-* utilities set the vertical-align property. They apply to inline-level and table-cell elements.

Utility	CSS	Use
`align-baseline`	`vertical-align: baseline`	Default alignment
`align-top`	`vertical-align: top`	Align to top
`align-middle`	`vertical-align: middle`	Center with surrounding text
`align-bottom`	`vertical-align: bottom`	Align to bottom
`align-text-top`	`vertical-align: text-top`	Align to text top
`align-text-bottom`	`vertical-align: text-bottom`	Align to text bottom
`align-sub`	`vertical-align: sub`	Subscript
`align-super`	`vertical-align: super`	Superscript

<p>Text with an <span class="align-super">superscript</span> reference.</p>

The most common use is aligning an icon with adjacent text:

<span class="inline-flex items-center gap-1">
  <svg class="h-4 w-4">...</svg>
  <span>Label</span>
</span>

Modern layouts often use flexbox with items-center instead of vertical-align. But align-middle remains useful for table cells and inline elements where flexbox is not applicable.

<td class="align-middle">Cell content</td>

c. Text decoration

The decoration utilities control underlines, overlines, strikethroughs, and their styling.

Utility	CSS
`underline`	`text-decoration-line: underline`
`overline`	`text-decoration-line: overline`
`line-through`	`text-decoration-line: line-through`
`no-underline`	`text-decoration-line: none`

<p class="underline">Underlined text</p>
<p class="line-through">Struck-through text</p>
<a class="no-underline hover:underline">Link</a>

The decoration-* utilities control the style of the decoration line:

Utility	CSS
`decoration-solid`	`text-decoration-style: solid`
`decoration-double`	`text-decoration-style: double`
`decoration-dotted`	`text-decoration-style: dotted`
`decoration-dashed`	`text-decoration-style: dashed`
`decoration-wavy`	`text-decoration-style: wavy`

<p class="underline decoration-dotted">Dotted underline</p>
<p class="underline decoration-wavy decoration-red-500">Wavy red underline</p>

The decoration-* utilities also control the thickness and color:

<p class="underline decoration-2">Two-pixel underline</p>
<p class="underline decoration-blue-500">Blue underline</p>

The underline-offset-* utilities control the distance between the text and the underline:

<p class="underline underline-offset-4">Underline with more offset</p>

A common pattern is a link that has no underline by default and gains one on hover:

<a class="no-underline hover:underline text-blue-600">Learn more</a>

For strikethrough prices:

<span class="line-through text-gray-400">$49.99</span>
<span class="font-semibold">$39.99</span>

d. Text transformation

The transformation utilities change the capitalization of text without changing the underlying data.

Utility	CSS	Example output
`uppercase`	`text-transform: uppercase`	HELLO WORLD
`lowercase`	`text-transform: lowercase`	hello world
`capitalize`	`text-transform: capitalize`	Hello World
`normal-case`	`text-transform: none`	Hello World (as written)

<p class="uppercase">hello world</p>   <!-- renders: HELLO WORLD -->
<p class="lowercase">HELLO WORLD</p>   <!-- renders: hello world -->
<p class="capitalize">hello world</p>  <!-- renders: Hello World -->

The uppercase utility is commonly combined with tracking for labels:

<span class="text-xs font-medium uppercase tracking-widest">
  New
</span>

The capitalize utility capitalizes the first letter of each word. It does not handle edge cases like hyphenated words or names with particles, so it should be used with care for user-generated content.

<p class="capitalize">alice nguyen</p>  <!-- renders: Alice Nguyen -->

Transformation applies at render time, so the underlying data is unchanged. This matters for search, sort, and copy-paste: the text in the DOM is transformed, but the source value is what the application stores.

e. Truncation and overflow

When text is too long for its container, the browser’s default behavior is to wrap it. The overflow utilities change this behavior.

Utility	CSS	Effect
`truncate`	`overflow: hidden; text-overflow: ellipsis; white-space: nowrap`	Single-line ellipsis
`text-ellipsis`	`text-overflow: ellipsis`	Ellipsis (needs overflow hidden)
`text-clip`	`text-overflow: clip`	Clip without ellipsis
`break-normal`	`overflow-wrap: normal; word-break: normal`	Default wrapping
`break-words`	`overflow-wrap: break-word`	Break long words
`break-all`	`word-break: break-all`	Break anywhere
`whitespace-nowrap`	`white-space: nowrap`	No wrapping
`whitespace-pre`	`white-space: pre`	Preserve whitespace
`whitespace-pre-line`	`white-space: pre-line`	Preserve newlines

The truncate utility is the single-line ellipsis pattern. It applies three properties at once: overflow: hidden, text-overflow: ellipsis, and white-space: nowrap.

<p class="truncate">A very long line of text that will be cut off with an ellipsis.</p>

For truncation to work inside a flex container, the element needs min-w-0 so it can shrink below its content width.

<div class="flex gap-2">
  <div class="min-w-0 flex-1 truncate">Long file name that needs truncation.txt</div>
  <button>Download</button>
</div>

Without min-w-0, the flex item does not shrink, and the text overflows rather than truncating.

For multi-line truncation, the line-clamp-* utilities limit the text to a specific number of lines:

<p class="line-clamp-2">
  A long paragraph that will be truncated after two lines with an ellipsis...
</p>

The line-clamp-* utilities apply display: -webkit-box, -webkit-line-clamp: N, -webkit-box-orient: vertical, and overflow: hidden. They work in all modern browsers.

For long words that would otherwise overflow, break-words allows them to break:

<p class="break-words">averylongwordthatwouldotherwiseoverflowthecontainer</p>

For URLs or code that should break anywhere, break-all is more aggressive:

<code class="break-all">https://example.com/very/long/path/that/never/breaks</code>

f. Combining these utilities

These utility families combine naturally. A card title might be truncated, a badge might be uppercase with wide tracking, a link might be underlined with an offset.

<!-- Card with truncated title -->
<div class="w-64 p-4 bg-white rounded shadow">
  <h3 class="truncate font-semibold">A very long product name that will be truncated</h3>
  <p class="line-clamp-2 text-sm text-gray-600 mt-2">
    A description that runs to several lines and will be clamped after two.
  </p>
</div>

<!-- Badge with uppercase tracking -->
<span class="inline-block px-2 py-1 text-xs font-medium uppercase tracking-widest bg-blue-100 text-blue-800 rounded">
  Featured
</span>

<!-- Link with underline offset -->
<a href="#" class="text-blue-600 underline underline-offset-4 decoration-2 hover:decoration-blue-800">
  Read the documentation
</a>

<!-- Table with right-aligned numbers -->
<table>
  <tbody>
    <tr>
      <td class="text-left">Item</td>
      <td class="text-right tabular-nums">1,234.56</td>
    </tr>
  </tbody>
</table>

The tabular-nums utility is often paired with right alignment for numbers because it makes digits the same width, so columns align.

Complete Example Session

<!-- ============================================
PART 1: HORIZONTAL ALIGNMENT
============================================ -->
<h1 class="text-center">Centered Heading</h1>
<p class="text-left">Left-aligned paragraph.</p>
<td class="text-right">1,234.56</td>

<!-- ============================================
PART 2: LOGICAL ALIGNMENT
============================================ -->
<p class="text-start">Aligns to text direction start.</p>
<p class="text-end">Aligns to text direction end.</p>

<!-- ============================================
PART 3: RESPONSIVE ALIGNMENT
============================================ -->
<h1 class="text-center md:text-left">Responsive Heading</h1>

<!-- ============================================
PART 4: VERTICAL ALIGNMENT
============================================ -->
<td class="align-middle">Cell content</td>
<p>Reference<span class="align-super">1</span></p>

<!-- ============================================
PART 5: UNDERLINE AND STRIKETHROUGH
============================================ -->
<p class="underline">Underlined</p>
<p class="line-through">Struck through</p>
<a class="no-underline hover:underline">Link</a>

<!-- ============================================
PART 6: DECORATION STYLES
============================================ -->
<p class="underline decoration-dotted">Dotted underline</p>
<p class="underline decoration-wavy decoration-red-500">Wavy red</p>
<p class="underline decoration-2 underline-offset-4">Thick offset</p>

<!-- ============================================
PART 7: TEXT TRANSFORMATION
============================================ -->
<p class="uppercase">hello world</p>
<p class="lowercase">HELLO WORLD</p>
<p class="capitalize">hello world</p>
<span class="text-xs font-medium uppercase tracking-widest">New</span>

<!-- ============================================
PART 8: SINGLE-LINE TRUNCATION
============================================ -->
<div class="w-64">
  <p class="truncate">A very long line of text that will be cut off.</p>
</div>

<!-- ============================================
PART 9: TRUNCATION IN FLEX
============================================ -->
<div class="flex gap-2 w-64">
  <div class="min-w-0 flex-1 truncate">
    a-very-long-file-name-that-must-fit.txt
  </div>
  <button class="shrink-0">Download</button>
</div>

<!-- ============================================
PART 10: MULTI-LINE TRUNCATION
============================================ -->
<p class="line-clamp-3">
  A long paragraph that will be truncated after three lines. The ellipsis
  appears automatically when the text exceeds the specified number of lines,
  which is useful for card descriptions and previews.
</p>

These ten parts cover horizontal alignment, logical alignment, responsive alignment, vertical alignment, underline and strikethrough, decoration styles, text transformation, single-line truncation, truncation in flex, and multi-line truncation.

Quick Reference

Horizontal Alignment

Utility	CSS
`text-left`	`text-align: left`
`text-center`	`text-align: center`
`text-right`	`text-align: right`
`text-justify`	`text-align: justify`
`text-start`	`text-align: start`
`text-end`	`text-align: end`

Vertical Alignment

Utility	CSS
`align-baseline`	`vertical-align: baseline`
`align-top`	`vertical-align: top`
`align-middle`	`vertical-align: middle`
`align-bottom`	`vertical-align: bottom`
`align-super`	`vertical-align: super`
`align-sub`	`vertical-align: sub`

Decoration

Utility	Property
`underline`	`text-decoration-line: underline`
`overline`	`text-decoration-line: overline`
`line-through`	`text-decoration-line: line-through`
`no-underline`	`text-decoration-line: none`
`decoration-solid`	`text-decoration-style: solid`
`decoration-dotted`	`text-decoration-style: dotted`
`decoration-wavy`	`text-decoration-style: wavy`
`decoration-2`	`text-decoration-thickness: 2px`
`underline-offset-4`	`text-underline-offset: 4px`

Transformation

Utility	CSS
`uppercase`	`text-transform: uppercase`
`lowercase`	`text-transform: lowercase`
`capitalize`	`text-transform: capitalize`
`normal-case`	`text-transform: none`

Truncation and Overflow

Utility	Effect
`truncate`	Single-line ellipsis
`text-ellipsis`	Ellipsis (needs overflow hidden)
`text-clip`	Clip without ellipsis
`line-clamp-N`	Multi-line ellipsis
`break-words`	Break long words
`break-all`	Break anywhere
`whitespace-nowrap`	No wrapping

Best Practices

✅ Do This:

<!-- Center headings, left body -->
<h1 class="text-center">Title</h1>
<p class="text-left">Body text.</p>

<!-- Truncate with min-w-0 in flex -->
<div class="min-w-0 flex-1 truncate">Long name</div>

<!-- Uppercase labels with tracking -->
<span class="text-xs uppercase tracking-widest">Label</span>

<!-- Underline with offset for links -->
<a class="underline underline-offset-4">Link</a>

<!-- Multi-line clamp for card descriptions -->
<p class="line-clamp-2">Description...</p>

❌ Don’t Do This:

<!-- Truncate without min-w-0 in flex -->
<div class="flex-1 truncate">Won't truncate</div>  <!-- ❌ -->

<!-- Break-all for normal prose -->
<p class="break-all">Normal text</p>  <!-- ❌ -->

<!-- Justify narrow columns -->
<p class="text-justify w-32">Very narrow justified text</p>  <!-- ❌ -->

<!-- Uppercase body text -->
<p class="uppercase">Long body paragraph</p>  <!-- ❌ hard to read -->

Common Pitfalls

Pitfall	Why It Happens	Fix
Truncation not working	Missing `min-w-0` in flex	Add `min-w-0`
Text overflows container	No overflow handling	Use `truncate` or `break-words`
Ellipsis not showing	Missing `overflow: hidden`	Use `truncate`
Justified text looks bad	Narrow column	Avoid justify in narrow containers
Vertical align has no effect	Applied to block element	Use on inline or table-cell
Uppercase hurts readability	Applied to long text	Reserve for short labels

Real-World Examples

1. Centered Hero Heading

<h1 class="text-center text-4xl font-bold">Welcome</h1>

2. Right-Aligned Numbers

<td class="text-right tabular-nums">1,234.56</td>

3. Link with Hover Underline

<a class="no-underline hover:underline text-blue-600">Learn more</a>

4. Strikethrough Price

<span class="line-through text-gray-400">$49.99</span>

5. Uppercase Badge

<span class="text-xs font-medium uppercase tracking-widest">New</span>

6. Truncated Card Title

<h3 class="truncate font-semibold">Long product name...</h3>

7. Truncated in Flex Row

<div class="flex gap-2">
  <span class="min-w-0 flex-1 truncate">Long text</span>
  <button class="shrink-0">Action</button>
</div>

8. Multi-Line Clamp

<p class="line-clamp-3">Card description...</p>

9. Break Long URL

<code class="break-all">https://example.com/very/long/path</code>

10. Superscript Reference

<p>Text<span class="align-super">1</span></p>

Visual

Horizontal Alignment

┌──────────────────────────────────────────────────────────────┐
│  text-left            text-center         text-right         │
│  ┌───────────────┐   ┌───────────────┐   ┌───────────────┐  │
│  │Text           │   │    Text       │   │         Text  │  │
│  └───────────────┘   └───────────────┘   └───────────────┘  │
│                                                              │
│  text-start           text-end                               │
│  └── Logical, flips in RTL                                   │
└──────────────────────────────────────────────────────────────┘

Decoration

┌──────────────────────────────────────────────────────────────┐
│  underline           ──  Text with underline                 │
│  line-through        ──  T̶e̶x̶t̶ ̶w̶i̶t̶h̶ ̶s̶t̶r̶i̶k̶e̶                   │
│  decoration-dotted   ──  Text with dotted underline          │
│  decoration-wavy     ──  Text with wavy underline            │
│  underline-offset-4  ──  Text with spaced underline          │
└──────────────────────────────────────────────────────────────┘

Transformation

┌──────────────────────────────────────────────────────────────┐
│  Source: "hello world"                                       │
│                                                              │
│  uppercase    →  HELLO WORLD                                 │
│  lowercase    →  hello world                                 │
│  capitalize   →  Hello World                                 │
│  normal-case  →  hello world                                 │
└──────────────────────────────────────────────────────────────┘

Truncation

┌──────────────────────────────────────────────────────────────┐
│  truncate (single line):                                     │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  A very long line of text that will be cut off...      │  │
│  └────────────────────────────────────────────────────────┘  │
│                                                              │
│  line-clamp-2 (multi-line):                                  │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  A long paragraph that will be truncated after two     │  │
│  │  lines with an ellipsis...                             │  │
│  └────────────────────────────────────────────────────────┘  │
│                                                              │
│  break-words (long word):                                    │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  averylongwordthatwouldotherwiseoverflowthecontain     │  │
│  │  er                                                    │  │
│  └────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────┘

Truncation in Flex

┌──────────────────────────────────────────────────────────────┐
│  WITHOUT min-w-0:                                            │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  long-filename-that-does-not-fit.txt  [Download]       │  │
│  │  (overflows)                                           │  │
│  └────────────────────────────────────────────────────────┘  │
│                                                              │
│  WITH min-w-0:                                               │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  long-filename-that-does...  [Download]                │  │
│  │  (truncated with ellipsis)                             │  │
│  └────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
Horizontal align	`text-left`, `text-center`, `text-right`, `text-justify`
Logical align	`text-start`, `text-end`
Vertical align	`align-baseline`, `align-top`, `align-middle`, `align-bottom`
Underline	`underline`, `no-underline`, `overline`
Strikethrough	`line-through`
Decoration style	`decoration-solid`, `decoration-dotted`, `decoration-wavy`
Decoration thickness	`decoration-2`
Underline offset	`underline-offset-4`
Transformation	`uppercase`, `lowercase`, `capitalize`, `normal-case`
Single-line truncation	`truncate`
Multi-line truncation	`line-clamp-N`
Word breaking	`break-words`, `break-all`
No wrapping	`whitespace-nowrap`

Key takeaways:

Horizontal alignment uses text-* utilities. text-left, text-center, text-right, and text-justify set the text-align property. text-start and text-end use logical properties that flip in RTL languages.
Vertical alignment uses align-* utilities. They apply to inline and table-cell elements. Modern layouts often use flexbox items-center instead, but align-middle remains useful for tables.
Decoration has line, style, thickness, and offset. underline adds a line; decoration-dotted or decoration-wavy changes its style; decoration-2 sets its thickness; underline-offset-4 moves it away from the text.
Transformation changes display, not data. uppercase, lowercase, and capitalize modify the rendered text without changing the underlying value in the DOM’s data.
truncate is the single-line ellipsis pattern. It applies overflow: hidden, text-overflow: ellipsis, and white-space: nowrap together.
min-w-0 is required for truncation in flex. Without it, the flex item does not shrink below its content width, and the text overflows instead of truncating.
line-clamp-N truncates to multiple lines. It applies the -webkit-line-clamp property with the standard overflow: hidden and display: -webkit-box, and it is supported in all modern browsers.
break-words allows long words to break. It is used for URLs, code, and unbroken strings that would otherwise overflow their container.

Remember: Text alignment, decoration, transformation, and truncation are the utilities that handle the details of how text sits and displays. Alignment places text horizontally and vertically. Decoration adds visual emphasis through underlines and strikethroughs, with control over style, thickness, and offset. Transformation changes capitalization for display without altering data. Truncation handles text that does not fit, whether that means a single-line ellipsis, a multi-line clamp, or breaking long words. The most common pitfall is truncation that does not work because min-w-0 is missing in a flex context. The most common best practice is reserving uppercase and wide tracking for short labels, and keeping body text in normal case with comfortable leading. These utilities are small individually, but together they determine whether text reads as polished or as an afterthought.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!