Break text into even line lengths with CSS only

Question

I have a div that has text-align: center applied. It should be able to contain various text that may or may not wrap. When it wraps, I would like to have each line be roughly the same length, so it would show:

The quick brown fox jumps

over the lazy dog.

instead of:

The quick brown fox jumps over the lazy

dog.

Basically, I'm looking for a pure CSS way to automatically place the break near the center of the text.

I know there are JavaScript solutions, and I have currently implemented a server side solution, but I'm always trying to learn more CSS to make things more flexible in the future.

Answer 1

I'm quite sure you cannot do that with css, you can control no break points with html though.

<nobr>The quick brown fox jumps</nobr><nobr>over the lazy dog.</nobr>

Should give you the result you want. Also you can stick   between words that you don't want to wrap, for instance: The quick brown fox jump over the lazy dog. would give you the same result.

Answer 2

Put the pieces you don't want to break in span tags that forbid wrapping:

<span style="white-space: nowrap">The quick brown fox jumps</span>
<span style="white-space: nowrap">over the lazy dog.</span>

(I know this is old, but I just went looking for this.)