Break text into even line lengths with CSS only

Question

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

Fast brown fox jumping

over a lazy dog.

instead:

Fast brown fox jumps through lazy

dog.

Basically, I'm looking for a clean CSS way that automatically puts a gap in the center of the text.

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

Answer 1

I'm sure you cannot do this with css, but you can control breakpoints with html.

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

Should give you the result you want. You can also hold   between words that you don’t want to wrap, for example: The quick brown fox jump over the lazy dog. will give you the same result.

Answer 2

What if you reduce the width of your div? Otherwise, I'm not sure that you can only do this with CSS

Answer 3

Put snippets that you don’t want to break in span tags that prohibit packaging:

 <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 was just looking for it.)