A fast text wrap balancer for multi-line headlines on the web. https://www.ctrl.blog/entry/text-wrap-balance.html
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Daniel Aleksandersen 0bca748636
1 year ago
.mailmap Add mailmap 1 year ago
LICENSE Initial commit 1 year ago
README.md Documentation 1 year ago
boilerplate.html Documentation 1 year ago
text-balancer.js Initial (re-)implementation 1 year ago


Text Balancer

A fast text wrap balancer for multi-line headlines on the web. Wraps texts more evenly across lines. Reduces uneven line lengths.

Rebalances texts on device orientation changes or when the window or element is resized.

Intended as a fallback for web browsers that dont yet support the text-wrap: balance CSS property. (No browsers support this property as of September 2021.)

Based on the Text Balancer module by ©20162017 New York Times Company. Differences between this implementation and the original are documented in this companion article.



  1. Apply a balance-text class to your headline elements.
  2. Make sure headlines are wrapped in a parent element that specifies the desired max-width. (You cant set this on the headline element itself.)
  3. Load text-balancer.js.

See the boilerplate.html file. It has some advantages like hiding the flash of unstyled content (FOUC) that may briefly show unbalanced text.