Text Wrap
The new text-wrap property is great for balancing out headings that spread onto multiple lines.
h1, h2, h3 {
text-wrap: balance;
}
This only works well for 2 or 3 lines of text. For longer sections using text-wrap: pretty helps balance out the text so that there are no stray orphans (one word on it’s own) at the end of the block.
It takes the following values:
text-wrap: wraptext-wrap: nowraptext-wrap: balancetext-wrap: stabletext-wrap: pretty
The value of balance seems to be the one most useful.
A long h2 heading to check how this works
You can edit this text and that in the heading to see how what difference this makes. The heading has text-wrap: balance applied whilst this paragraph has text-wrap: pretty. You can also change the size of this content box by dragging the handle in the bottom left corner.