How can I evenly balance text over multiple lines?

Issue

I'd like to display a short piece of text that may wrap to two or three lines. It's inside a highly visual element and for styling purposes I'd like the lines to be as equal in length as possible, preferring one line over two.

Instead of this:

This is an example of a piece of text that will wrap to two

lines.

I want this:

This is an example of a piece of

text that will wrap to two lines.

But I don't want to limit the width of the text container:

This text is long enough to just barely fit in two lines. It

should not wrap to three or more lines so no width limiting.

Is there a way to do this in pure CSS or with a tolerable amount of JavaScript?

Solution

The CSS Text Module 4 property:

text-wrap: balance;

will do this. https://drafts.csswg.org/css-text-4/#text-wrap

There's also a package which implements a polyfill for existing browsers.

Here's a demo of balance text. [Archived copy]

Answered By - mikemaccana