Capítulo 20 de 29
This chapter covers everything about text besides font choice/size/weight: alignment, color's decoration-focused siblings (underline/strike color/style/thickness), transform/indent/truncation, wrapping behavior, and a handful of small structural text properties (content, tab-size, vertical-align, caption-side).
text-align: text-left, text-center, text-right, text-justify, text-start/text-end (logical, direction-aware).
Text decoration: underline/overline/line-through/no-underline (text-decoration-line); decoration-solid/-double/-dotted/-dashed/-wavy (text-decoration-style); decoration-<number>/decoration-from-font/decoration-auto (text-decoration-thickness); decoration-<color> — the full palette, same as any other color utility (text-decoration-color); underline-offset-<number>/-auto (negatable) for text-underline-offset.
text-transform: uppercase, lowercase, capitalize, normal-case.
text-indent: indent-<number> (spacing scale, negatable), indent-px (negatable), -(<custom-property>)/-[<value>].
Truncation (text-overflow): truncate (shorthand — sets overflow:hidden; text-overflow:ellipsis; white-space:nowrap together), text-ellipsis, text-clip (each set individually if you need the underlying properties separately from truncate's bundle).
text-shadow (--text-shadow-* namespace): text-shadow-2xs → text-shadow-lg (5 named steps), text-shadow-none, text-shadow-(<custom-property>), text-shadow-[<value>], and a color-only override text-shadow-(color:<custom-property>)/text-shadow-<color> (composes independently from the shadow's blur/offset, same variable-composition trick as filter).
text-wrap: text-wrap (wrap, default), text-nowrap, text-balance (evens out line lengths — best for headlines, browser-limited to a handful of lines for performance), text-pretty (avoids orphans/widows without balancing every line — better for body paragraphs than text-balance).
overflow-wrap: wrap-break-word (break mid-word only if needed), wrap-anywhere (break anywhere, even if unnecessary — useful inside flex/grid where min-width auto-sizing would otherwise force overflow), wrap-normal.
word-break: break-normal, break-all (break between any character), break-keep (keep-all — mainly affects CJK text line-breaking).
white-space: whitespace-normal (collapse+wrap), -nowrap (collapse, no wrap), -pre (preserve, no wrap), -pre-line (collapse spaces but preserve line breaks + wrap), -pre-wrap (preserve everything + wrap), -break-spaces (preserve, wrap, and trailing spaces take up space instead of hanging).
vertical-align: align-baseline, -top, -middle, -bottom, -text-top, -text-bottom, -sub, -super, -(<custom-property>)/-[<value>] — only affects inline/inline-block/table-cell elements.
tab-size: tab-<number> (e.g. tab-2, tab-8), -(<custom-property>)/-[<value>] — controls rendered width of literal tab characters in preformatted text.
content (pairs with before:/after: variants): content-[<value>] (e.g. before:content-['→']), content-(<custom-property>), content-none.
caption-side: caption-top, caption-bottom (position of a <table>'s <caption>).
<h1 class="text-4xl font-bold text-balance">A Headline That Wraps Evenly Across Lines</h1>
<p class="text-pretty">Body copy that avoids single-word orphan lines without over-balancing every line.</p>
<a class="after:content-['→'] after:ml-1">Read more</a>
<p class="truncate max-w-xs">A single line that gets cut off with an ellipsis when too long.</p>
text-balance for headlines vs. text-pretty for paragraphs, using content-[...] with after: for a decorative arrow, and truncate for single-line ellipsis (vs. line-clamp-* for multi-line, covered in the Fonts & Sizing chapter).text-balance is for short headline-style text (line count is capped by the browser); text-pretty scales to full paragraphs — don't reach for text-balance on body copy.truncate is the one-line ellipsis shorthand; line-clamp-<n> (previous chapter) is the multi-line equivalent — don't combine them.wrap-anywhere is the fix when a long unbroken string (URL, hash) blows out a flex/grid item's width despite overflow-wrap: break-word not being aggressive enough.content-[...] only matters paired with before:/after: — it's inert on a normal element.decoration-<color> draws from the same palette as every other color utility.text-shadow-<color> layering independently of blur/offset) follow the same pattern as filter.