Newly availableUseful when text-wrap affects readability, line flow, or typographic consistency. Treat it as a content-facing choice, not just decoration.
Typography Newly available

text-wrap

The text-wrap CSS property sets how lines break in text that overflows the container. It is a shorthand for text-wrap-style and text-wrap-mode.

Typography

Overview

The text-wrap CSS property sets how lines break in text that overflows the container. It is a shorthand for text-wrap-style and text-wrap-mode.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-wrap
114
114
121
17.4
114
17.4
Other
css.properties.text-wrap-mode

The text-wrap-mode CSS property controls whether the text inside an element is wrapped. The different values provide alternate ways of wrapping the content of a block element. It can also be set, and reset, using the text-wrap shorthand or the white-space shorthand.
130
130
124
17.4
130
17.4
CSS property
nowrap
130
130
124
17.4
130
17.4
wrap
130
130
124
17.4
130
17.4
Other
css.properties.text-wrap-style

The text-wrap-style CSS property controls how text inside an element is wrapped. The different values provide alternate ways of wrapping the content of a block element. It can also be set, and reset, using the text-wrap shorthand.
130
130
124
17.5
130
17.5
CSS property
auto
130
130
124
17.5
130
17.5
stable
130
130
124
17.5
130
17.5
nowrap
114
114
124
17.4
114
17.4
stable
130
130
121
17.5
130
17.5
wrap
114
114
124
17.4
114
17.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Basic text wrapping */
p {
  text-wrap: wrap;
}

/* Even line spacing */
h1 {
  text-wrap: balance;
}

/* Prevent isolated words */
.article p {
  text-wrap: pretty;
}

Live demo

Wrap(normal)

text-wrap property Wrap(normal) demo.

PreviewFullscreen

Balance(equalization)

text-wrap property Balance(equalization) demo.

PreviewFullscreen

Pretty(optimization)

text-wrap property Pretty(optimization) demo.

PreviewFullscreen

Use cases

  • Reading rhythm

    Use text-wrap to improve how text wraps, aligns, or scales in dense layouts and editorial UI.

  • Language-aware text

    Adjust typography when script direction, spacing, or writing rules differ across languages.

Cautions

  • Test with real content rather than short placeholder strings because typographic behavior changes with length and language.
  • Prefer the smallest rule that solves the layout problem so text remains easy to maintain.

Accessibility

  • Typography choices should preserve readability at high zoom and on narrow screens.
  • Avoid stylistic settings that reduce comprehension or make scanning harder.

Related links

Powered by web-features