Simple Vue Component That Makes Titles More Readable

Default

Vue: A JavaScript framework for building UI on the web.

With Balancer

Vue: A JavaScript framework for building UI on the web.

Vue Wrap Balancer avoids single hanging word on the last line

Custom Balance Ratio

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

<Balancer ratio="0.65" />

Adjust the balance ratio to a custom value between 0 (loose) and 1 (compact, the default)

Note that if the native CSS balance ( text-wrap: balance ) is available, Vue Wrap Balancer will use it instead. And the `ratio` option will be ignored in that case.

How Does It Work?

Vue Wrap Balancer reduces the width of the content wrapper as much as it could, before causing an extra line break. When the minimum width is reached, each line should approximately have the same width, hence it’ll look more balanced and compact.

Check out the GitHub Repository to learn more.

Use Cases

Default
This deployment is currently in progress. Read more.
With Balancer
This deployment is currently in progress. Read more.

Useful in tooltips and other UI components

Default

第六個沉思:論物質性東西的存在;論人的靈魂和肉體之間的實在區別

With Balancer

第六個沉思:論物質性東西的存在;論人的靈魂和肉體之間的實在區別

Left aligned, non-latin content

Default
You have wakened not out of sleep, but into a prior dream, and that dream lies within another, and so on, to infinity, which is the number of grains of sand. The path that you are to take is endless, and you will die before you have truly awakened.
- Jorge Luis Borges
With Balancer
You have wakened not out of sleep, but into a prior dream, and that dream lies within another, and so on, to infinity, which is the number of grains of sand. The path that you are to take is endless, and you will die before you have truly awakened.
- Jorge Luis Borges

Makes multi-line content more compact with fewer visual changes when resizing

About Vue Wrap Balancer

This project is a port of react-wrap-balancer which was inspired by Adobe’s balance-text project, and Daniel Aleksandersen’s Improving the New York Times’ line wrap balancer. If you want to learn more, you can also take a look at the text-wrap: balance proposal.

Special thanks to Shu Ding, the author of the React component.

Deployed on