Using CSS, can you break a line based on the halfway point of the text?

Question

If I have a container with some text in it, is there a way to break the line in half, rather than based on some fixed width?

For example, I would normally assign a width (say, 200px) to a container before placing some text in it. Often this can lead to an awkward line break where only the last word in a header must wrap.

This is a header that is long

versus

This is a header that is long

Ideally it would only break if the text didn't fit on one line, and if it broke, it would do so in an even way. Would be happy with just always breaking in half as well, though, since that seems pretty complex for CSS to do alone.

Answer 1

You can now accomplish this with CSS using text-wrap: balance;