Skip to content

CSS Text Properties Playground

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

Playground

Box Model

display
contain

Text Behavior

white-space
word-break
overflow-wrap

Overflow Handling

overflow-x
overflow-y
text-overflow

Refinements

The quick brown fox jumps over the lazy dog. This is a longer text to demonstrate text overflow, wrapping, and truncation behaviors with various CSS properties. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Common Patterns

Single-line truncation with ellipsis

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

Multi-line truncation (line clamping)

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

Code block with wrapping

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

Tight button text alignment

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

Aggressive wrapping for constrained spaces

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

Hyphenated text

css
hyphens: auto;

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

Preserving line breaks in user content

css
white-space: pre-line;

Fade-out overflow effect

css
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