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.
Unfortunately, this is not possible in pure CSS. This this jQuery plugin automatically breaks your line of text nicely in 2 when the container is smaller than the text width: