Question

Is it possible to shorten a container (preferably div) so that the dynamically inserted text within becomes a “perfect” rectangle without increasing the height?

<div style="width:800px;">
<div>I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>
<br>
<div style="width:800px;">
<div style="width:530px;">I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>​

http://jsfiddle.net/Q7gcb/

I’d like to do this with a single CSS setting if possible, but I can’t find one. I’d also like to avoid a loop in javascript to do this because I have to do this to a lot of divs, and I don’t want performance to suffer.

white-space doesn’t seem to help unless if I’m using it wrong.

Many thanks in advance!

text-align:justify;

By itself doesn’t help: http://jsfiddle.net/Q7gcb/4/

max-width + text-align:justify;

Doesn’t work either: http://jsfiddle.net/Q7gcb/5/

Answer 1

I believe that what you are looking for can be found Here

“In DTP and word processing applications, this option is known as ‘force justify’. Unfortunately, this is not an option in CSS.”