Codectionary / Developer documentation / CSS

Progressive Text Wrapping with pretty

Pretty wrapping allows a browser to spend more effort improving line breaks, often avoiding an isolated short final word where its implementation supports that optimisation.

What it is and why to use it

Pretty wrapping allows a browser to spend more effort improving line breaks, often avoiding an isolated short final word where its implementation supports that optimisation. It is useful as a progressive typography enhancement, with ordinary wrapping remaining a fully usable baseline.

Common mistakes and limitations

This is a newer CSS Text feature, so verify current browser and version support. Rendering can differ even between supporting engines. Do not make an exact screenshot line count part of the content’s meaning.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<p class="summary">A useful example explains the goal, the important expressions and the meaning of the result so a beginner can apply the idea in another project.</p>

Syntax

text-wrap: pretty;

Examples

Progressive Text Wrapping with pretty

Run the CSS against the supplied HTML, then experiment with the values.

.summary { max-width: 24rem; font: 1.2rem/1.6 system-ui; text-wrap: pretty; }
  1. The paragraph width creates enough lines for wrapping choices to matter.
  2. pretty requests improved break selection, but does not specify exact lines or a guaranteed orphan-removal algorithm.
  3. Compare with normal wrapping at several widths. Browsers that do not recognise the declaration use their usual wrapping behaviour.
HTML used by this example
<div class="demo"><p class="summary">A useful example explains the goal, the important expressions and the meaning of the result so a beginner can apply the idea in another project.</p></div>

Best practices

  • This is a newer CSS Text feature, so verify current browser and version support. Rendering can differ even between supporting engines. Do not make an exact screenshot line count part of the content’s meaning.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading