CSS text-wrap: Wrapping, Overflow, and Long Text

CSS text-wrap controls whether text wraps and which wrapping strategy the browser should use. Start by deciding whether the content needs normal lines, a single-line label, or special treatment for a short heading.

.article-copy {
  text-wrap: wrap;
}

.compact-label {
  text-wrap: nowrap;
}

Wrapping and overflow are separate decisions. Preventing a line break does not, by itself, hide the text or add an ellipsis.

CSS text-wrap combines mode and style

The text-wrap reference describes a shorthand for text-wrap-mode and text-wrap-style. That explains why setting a simple value can affect more than one part of the wrapping behavior.

Support and detailed behavior vary by value. Check the reference for the value your project uses rather than treating support for wrap as evidence for every newer strategy.

For choosing between balance and pretty in a design, use the separate line-break article. This article concentrates on wrapping controls, overflow, and the cases those visual strategies do not solve.

Give an ellipsis an actual width constraint

A single-line label needs a constrained box and an overflow policy:

<div class="label-container">
  <p class="single-line">A long report name that does not fit in this narrow space</p>
</div>

.label-container {
  inline-size: 16rem;
}

.single-line {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The text-overflow property controls the indicator for clipped inline content. Without an actual overflow situation, there is nothing for the ellipsis to represent.

Use truncation for a label whose complete value is available through the surrounding interface. It is a poor default for an article paragraph, where the hidden words are the content the person came to read.

If the label is a flex or grid child, also inspect the item’s minimum size. A wrapping declaration cannot correct every constraint imposed by the parent layout.

Let long URLs break instead of disabling wrapping

A long unspaced address is a different problem:

<p class="reference-url">https://example.com/a-very-long-unbroken-path-segment-that-does-not-fit</p>

.reference-url {
  max-inline-size: 20rem;
  overflow-wrap: anywhere;
}

The overflow-wrap reference explains the extra break opportunities. text-wrap: balance is not a replacement for making a long unbroken string fit.

word-break is another property with a different set of rules. Avoid applying word-break: break-all globally just to fix one troublesome URL; normal words elsewhere still deserve readable breaks.

Reset wrapping without accidentally resetting its strategy

A shorthand can reset parts you did not spell out. Consider a balanced heading that later receives a mode override:

.heading {
  text-wrap: balance;
}

.heading--ordinary {
  text-wrap: wrap;
}

The second declaration sets the shorthand again. If you need to change only whether wrapping is allowed, use the longhand deliberately:

.heading--single-line {
  text-wrap-mode: nowrap;
}

That preserves the distinction between the wrapping mode and the selected style. It does not promise that a multi-line balancing strategy will have a visible effect while wrapping is disabled.

Check computed styles when a heading stops behaving as expected. A later utility class may be resetting the shorthand even though its name sounds unrelated to typography.

Keep editable text stable where the value is supported

An editable block can request stable wrapping:

.editor {
  inline-size: 30rem;
  max-inline-size: 100%;
  text-wrap: stable;
}

The text-wrap-style reference describes the strategy’s purpose. Keep ordinary wrapping usable when the browser does not support the newer value.

This is a different decision from balancing a static article title. An editor should not unexpectedly rearrange earlier lines just to make a paragraph look more symmetrical.

I would choose the simplest wrapping rule that fits the content. Use normal wrapping for copy, an explicit overflow treatment for compact labels, and a separate check for long URLs or rigid layout constraints.

← Back to all articles