Content:
A recently added CSS feature could make your headings look prettier.
A common issue with headings is their inflexibility when wrapping to a new line. This can lead to situations where the final line of a heading is incredibly short, resulting in an unbalanced appearance.
While it is possible to specify where line breaks should occur, it’s impossible to come up with something which looks good in all situations.
Consider the following heading.
Now look at the same heading, with a different screen size.
Not a great look. The second line is unbalanced compared to the first.
A new CSS property called text-wrap, introduced as part of the draft CSS4 specification, allows the browser to calculate a better solution. Using the balance value, the browser will aim to optimise the location of the line wrap, to balance the amount of text on each line.
h1 {
text-wrap: balance;
}The result will look something like this.
A much neater result. It also works on much narrower screens, making better use of the available space
A few things should be kept in mind about using this new property.
First of all, at the time of writing, this is part of a draft specification. Therefore, browser support is limited, though this will improve over time. You can check current browser support on the ‘Can I Use’ website.
In addition, there will be a small performance penalty due to the browser calculation required to find the best wrap point. For a small number of headings, this should be fine, but avoid using this for all text on a page. We’d suggest keeping it only for your main heading, where unbalanced text would stand out more.
Finally, the overall text width is not reduced, and the text element will retain its original width. This is only relevant if you’re looking to position other elements around the text, but could catch you out if you don’t realise the space is still allocated.
Overall, this appears to be a useful addition to the CSS specification, and one that could make your web headings look more visually appealing.
