Text
text-wrap
text-wrap decides whether lines wrap and how the break points are chosen. It can even out the line lengths of a heading or avoid a single word on the last line.
Syntax
<'text-wrap-mode'> || <'text-wrap-style'>Preview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
text-wrap: balance;
}Controls
text-wrapbalance
text-wrap-mode
text-wrap-style
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
text-wrap is a shorthand for text-wrap-mode, which decides whether lines wrap, and text-wrap-style, which decides how break points are chosen. You can write either one alone or both together.
text-wrap-mode
wrap: wraps at the box width. This is the initial value.nowrap: never wraps, so long lines overflow the box. text-wrap-style has no effect then.
text-wrap-style
auto: the browser favors speed, filling each line before wrapping. This is the initial value.balance: wraps so that the lines are as close in length as possible. Good for headings and short captions. It may not apply to long text (Chrome stops at 6 lines).pretty: looks at the whole paragraph and favors readability, for example by avoiding a single word on the last line. Good for body text, though slower thanauto. It only changes anything when the last line would end up short, so on this page's sample it may look the same asauto.stable: keeps lines that are already written from reflowing while the text is being edited. Good for editable text.
Browsers without support drop the declaration and wrap as usual. Since it only refines how text looks, it is safe to use as is.