Text Wrap Pretty is coming to CSS
I talked about the CSS
text-wrap property and its
balance value in one of my previous articles where the browser would try to wrap the text in a way that the last line of an element is as long as the first line. So that, the text looks balanced and more readable.
A similarly functioning new value is coming to the
text-wrap property called
pretty which will try to intelligently break the text in block elements in such a way that there wouldn’t be a single/orphan word on the last line.
So, for instance, if there is a paragraph consisting of four lines and the last line has a single word, the
pretty value will try to break the text in such a way that the last line has two or more words.
Take the following example.
As you can tell, the last line of the paragraph has a single word which is not ideal. This is where the
pretty value comes in. It will try to break the text in such a way that there wouldn’t be a single word hanging on the last line.
In other words, paragraphs that will end up with a short single word on the last line are adjusted so that the last line has two or more words.
balance value is more about balancing the text in a way that the last line of an element is as long as the first line. The
pretty value almost behaves the same way but it’s more about preventing the single word on the last line when there are multiple lines in the element.
As for the browser support, the
text-wrap: pretty is estimated to be landed in Chrome 117 across desktop and Android browsers according to this draft.