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.
The pretty value
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 vs pretty
The 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.
Browser support
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.
Learn more about the feature in this episode of the ShopTalk Show and this post on the CodePen Blog.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
