DEV Community

Kartik Chaturvedi
Kartik Chaturvedi

Posted on • Originally published at

Using React Wrap Balancer to Make Wrapping Less Awkward

Text wrapping can be pretty unpredictable, especially on smaller screen sizes. Words might be left hanging on the last line, which severely impacts readability and results in some awkward page layouts if left as is. Try showing a headline screenshot like below to a designer, and they will tell you something is off! ;)

Before wrap balancing, the text is simply too top-heavy

At the core is the need to add some sort of x-padding to the h1 text. However, we want it to be dynamic so that it only affects the longer line when the shorter line is too short. This is a problem big enough that Adobe created a jQuery plugin to address this issue. However, performance issues left a lot to be desired.

Later on, The New York Times made their attempt to resolve this issue once and for all, with what eventually became their text-balancer package.

The latest entry in this space is React Wrap Balancer, which works with React 18 and also includes a Provider wrapper to allow code sharing between multiple balancing components across your app.

Using this, headlines look a lot more balanced, don't you think?

After wrap balancing, the text is nicely stacked

There is now also a proposed CSS property called text-wrap which will give developers a JS-free way to control balancing, directly in CSS! Until that is finalized, happy balancing!

Top comments (0)