Kaivosukeltaja Kaivosukeltaja - 1 month ago 15
CSS Question

How can I split text evenly over multiple lines?

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?

Answer

2016 answer: the CSS4:

 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.

Comments