text-wrap-mode | CSS-Tricks

The text-wrap-mode property lets us control whether text should wrap into new lines or stay (and possibly overflow) on the same line. It is a constituent property for both the white-space and text-wrap shorthand properties.

p {
  text-wrap-mode: nowrap;
}

The text-wrap-mode property is defined in the CSS Text Module Level 4 specification.

Syntax

text-wrap-mode: wrap | nowrap;

Initial: wrap
Applies to: text
Inherited: yes
Percentages: N/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Note: the name text-wrap-mode is a placeholder, and the CSSWG is looking for a better name. It’s advised then to use the text-wrap shorthand instead of the longhand property to ensure future compatibility.

Values

text-wrap-mode: wrap;
text-wrap-mode: nowrap;

wrap: Text can break across several lines. How it breaks may depend on the browser and the text-wrap-style property.
nowrap: Text doesn’t break across lines, so if it doesn’t fit its block container it will overflow it.

Basic usage

The text-wrap-mode property can be used to avoid line wrapping in text, which may be useful for certain decorative texts. To do so, we just have to set text-wrap-mode to nowrap.

p {
  text-wrap-mode: nowrap;
}

Notice that nowrap is written with no spaces in-between, unlike most CSS values, which are separated by a hyphen. Consider it a CSS “mistake” from the past.

What about `white-space`?

You may have noticed how the white-space property also has a nowrap value that can be used to avoid line breaks, just as text-wrap-mode. In order to avoid conflicting properties, once text-wrap-mode was defined, white-space was also redefined to be a shorthand for the white-space-collapse and text-wrap-mode.

Then you can use either text-wrap-mode: nowrap, text-wrap: nowrap or white-space: nowrap to set the text-wrap-mode property. Although text-wrap-mode isn’t recommended since its name may change in the future.

As shown in DevTools: