CSS Text Properties Playground

Once you understand individual properties, the real complexity emerges: how do they interact?

Common Patterns

Single-line truncation with ellipsis

white-space: nowrap;
contain: content;
text-overflow: ellipsis;

Multi-line truncation (line clamping)

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

Code block with wrapping

white-space: pre-wrap;
overflow-wrap: break-word;

Tight button text alignment

line-height: 1.2;
margin-block: calc(0.5cap - 0.5lh);
padding: 0.75em 1.5em;

Aggressive wrapping for constrained spaces

word-break: break-all;
width: 150px;

Hyphenated text

hyphens: auto;

Requires lang attribute on the element, e.g. <div lang="en">

Preserving line breaks in user content

white-space: pre-line;

Fade-out overflow effect

white-space: nowrap;
overflow: hidden;
mask-image: linear-gradient(
  to right,
  black 0%,
  black calc(100% - 7ch),
  transparent 100%
);

Understanding Property Interactions

white-space vs overflow-wrap

• If white-space: nowrap, then overflow-wrap has no effect (text doesn’t wrap at all)
• white-space controls whether wrapping happens
• overflow-wrap controls how wrapping happens when long words appear

text-overflow vs overflow

• text-overflow: ellipsis requires overflow: hidden (or auto, scroll, clip)
• overflow: visible prevents text-overflow from working

line-clamp vs line-height

• Line clamp counts line boxes, not visual lines
• Changing line-height changes the height of each clamped line

margin-block vs line-height

• The calc(0.5cap - 0.5lh) formula depends on both cap height and line-height
• Larger line-height = larger negative margin (pulls text up more)

Resources

• Text Breaking & Wrapping for white-space and word-break
• Text Metrics & Alignment for text-box-trim and margin-block
• The Many Ways to Deal with Overflowing Text for practical solutions