Home / Companies / LogRocket / Blog / Post Details
Content Deep Dive

Improve text flow and balance with the CSS text-wrap property

Blog post from LogRocket

Post Details
Company
Date Published
Author
Rob O'Leary
Word Count
2,781
Language
-
Hacker News Points
-
Summary

Designers and developers often face challenges in text alignment and legibility, especially when dealing with widows and orphans, which are lines with a single word. Previously, text wrapping in CSS was a manual process with limited control, but the CSS Text Level 4 Specification introduces new values for the text-wrap property, namely "balance" and "pretty," which automate this task and enhance text layout. These values allow for more consistent text formatting by evening out line lengths, improving aesthetics. "Balance" is typically used for shorter text blocks like titles, while "pretty" is favored for longer body text, though each has its nuances and performance considerations. Despite an increase in rendering time due to the computational demands of these layout algorithms, they offer significant improvements in readability and design without altering element width. However, developers should be selective in their application to manage performance, as browser support for these properties varies, with "balance" being widely supported and "pretty" only available in Chrome and Edge.