"Perfectly" rectangular dynamic text

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/

I believe this might answer your question: http://stackoverflow.com/questions/6205109/justify-text-to-fill-a-div — DeeDub, Nov 28 '12 at 21:44
You can't manually set it. For example in IE9, or in Chrome on a Mac, your `
` example text is three lines long, not two (due to different text rendering). I think you need JavaScript. — thirtydot, Nov 28 '12 at 21:47
I appreciate your help and note. Already tried javascript. It makes my page choppy. Lots of dynamic divs. — , Nov 28 '12 at 21:48
Well, if I understand correctly what you're trying to do, it can't be done with pure CSS. You need JavaScript. Perhaps your implementation can be optimised? — thirtydot, Nov 28 '12 at 21:53
Damn. I tried geometrically decaying increments of shortening the width until the height increased. It got the job done, but it chopped the hell out of my page. — , Nov 28 '12 at 21:54

score 1 · Answer 1 · answered Nov 28 '12 at 21:40

1

div {text-align: justify;}

And you should set width value as well.

answered Nov 28 '12 at 21:40

hrr

1,676
1
13
15

score 1 · Accepted Answer · edited May 23 '17 at 12:28

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."

edited May 23 '17 at 12:28

Community

1
1

answered Dec 11 '12 at 18:50

DeeDub

1,654
1
12
18

score 0 · Answer 3 · answered Nov 28 '12 at 21:50

0

Set the max-width and text-align to justify.

div {
    max-width: 500px;
    text-align: justify;
}

Demo

answered Nov 28 '12 at 21:50

bookcasey

39,223
13
77
94

score 0 · Answer 4 · answered Nov 28 '12 at 21:56

Try this.

HTML

<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>
<br>
<div style="width:800px;">
<div class="justify">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>

CSS

.justify{
    text-align: justify;
    text-align-last: justify;
}

.justify:after {
    content: "";
    display: inline-block;
    width: 100%;
}

http://jsfiddle.net/Q7gcb/7/

I appreciate your creativity, but I'd rather shorten the div so that it looks like the 530px example. Thanks for trying! — , Nov 28 '12 at 22:03

"Perfectly" rectangular dynamic text

4 Answers4