Property text-wrap

CSS shorthand property controls how text inside an element is wrapped.

Syntax

/* Keyword values */ text-wrap: wrap; text-wrap: nowrap; text-wrap: balance; text-wrap: pretty; text-wrap: stable;

/* Global values */ text-wrap: inherit; text-wrap: initial; text-wrap: revert; text-wrap: revert-layer; text-wrap: unset;

Values

• wrap Text is wrapped across lines at appropriate characters (for example spaces, in languages like English that use space separators) to minimize overflow. This is the default value.

• nowrap Text does not wrap across lines. It will overflow its containing element rather than breaking onto a new line.

• balance Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (six or less for Chromium and ten or less for Firefox).

• pretty Results in the same behavior as wrap, except that the user agent will use a slower algorithm that favors better layout over speed. This is intended for body copy where good typography is favored over performance (for example, when the number of orphans should be kept to a minimum).

• stable Results in the same behavior as wrap, except that when the user is editing the content, the lines that come before the lines they are editing remain static rather than the whole block of text re-wrapping.

Description

There are 2 ways that text can flow across lines within a block of content, such as a paragraph (<p>) or headings (<h1>–<h6>). These are forced line breaks, that are controlled by the user, and soft line breaks, that are controlled by the browser. The text-wrap property can be used to prompt the browser how to control the soft line breaks.

The value you choose, for text-wrap, depends on how many lines of text you anticipate styling, whether the text is contenteditable, and whether you need to prioritize appearance or performance.

When the styled content will be limited to a short number of lines, such as headings, captions, and blockquotes, text-wrap: balance can be added to balance the number of characters on each line, enhancing layout quality and legibility. As browsers limit the number of lines impacted by this property, this value’s impact on performance is negligible.

For longer sections of text, text-wrap: pretty can be used. Note that pretty has a negative effect on performance, so it should be only used for longer blocks of text when the layout is more important than speed.

The stable value improves user experience when used on content that is contenteditable. This value ensures that, as the user is editing text, the previous lines in the area being edited remain stable.