Text Styling & Wrapping

Shape how text looks and flows, from underlines to perfectly balanced headlines.

CSS4 min readConcept 11 of 43

What it is

Text styling in CSS goes beyond picking a font and a size. It covers how text is decorated (text-decoration), capitalized (text-transform), aligned (text-align), and how it wraps at the end of a line (text-wrap).

While older properties like text-align have been around forever, modern CSS has introduced powerful new tools like text-wrap: balance to give developers layout-engine-level control over typography.

Why it matters

Good typography shapes the reading experience. A headline that wraps awkwardly with one word on the second line looks unprofessional.

In the past, developers tried to fix wrapping issues by hardcoding <br> tags into HTML. But when the screen size changed on a mobile device, those hard breaks caused even worse layout issues. CSS wrapping properties solve this responsively.

How it works

You apply these properties directly to the text container.

text-transform: uppercase changes the casing visually, leaving the original HTML text intact (which is better for screen readers than typing in ALL CAPS).

text-decoration adds lines (underline, line-through) and can be styled with color and thickness.

The modern text-wrap property gives the browser hints on how to break lines: balance makes lines roughly equal in width (ideal for headlines), while pretty prevents a single word from sitting alone on the last line (ideal for paragraphs).

Try it

See how modern text wrapping and styling shape the reading experience.

Adjust container width

280px

Slide to see how text reflows, wraps, and truncates dynamically at different widths.

balanced headlines

/* browser calculates equal line widths */
h1 { text-wrap: balance }

text-wrap: balance

text-wrap: normalfills first line fully

A Very Long Headline That Wraps Awkwardly

text-wrap: balanceequalizes line widths

A Very Long Headline That Wraps Awkwardly

pretty paragraphs

/* prevents a single word on the last line */
p { text-wrap: pretty }

text-wrap: pretty

text-wrap: normalmay leave single-word orphans

This is a responsive text block demonstrating the wrapping behavior when a container gets too narrow.

text-wrap: prettyavoids orphan words

This is a responsive text block demonstrating the wrapping behavior when a container gets too narrow.

text truncation

/* requires all three properties */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

three-property ellipsis truncation

text-overflow: ellipsistruncates with dots (...)
The quick brown fox jumps over the lazy dog.
text-overflow: clipcuts off abruptly
The quick brown fox jumps over the lazy dog.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1How do you prevent a headline from having one very long line and one very short line?
  2. 2Which property forces text to appear in ALL CAPS regardless of how it was typed in the HTML?
  3. 3What is the modern CSS way to prevent a single word from sitting alone on the last line of a paragraph (a "widow")?

Remember this

  • Use text-transform for casing instead of typing in all caps.
  • text-wrap: balance makes headline lines equal in width.
  • text-wrap: pretty prevents single-word orphans in paragraphs.
  • Never use <br> tags just to make a headline look better on your specific screen size.

Done with this concept?

Mark it complete to track your progress. No login needed.