text-wrap
How lines are broken: as usual, balanced in length, or avoiding a lonely last word.
Syntax
text-wrap: balance;Values
| Parameter | Type | Description |
|---|---|---|
| wrap | keyword | Normal wrapping (the default). |
| balance | keyword | Lines of nearly equal length — for headings. |
| pretty | keyword | Avoids a single short word on the last line — for paragraphs. |
| nowrap | keyword | No wrapping. |
Examples
An ordinary and a balanced heading:
<style>
h3 { width: 300px; border: 1px solid lightgray; }
</style>
<h3>A heading that wraps onto a second line by default</h3>
<h3 style="text-wrap: balance;">A heading that wraps onto a second line by default</h3>Notes
balance works in all current browsers since 2024 and only for short texts (a few lines). pretty is supported in Chrome and Safari; other browsers simply wrap as usual.
See also
- white-space — How spaces and line breaks in the source are handled and whether lines may wrap.
- text-align — Horizontal alignment of text and inline content inside a block.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.