/ / „Perfekt“ rechteckiger dynamischer Text [Duplikat] - css, dynamisch, Text, Breite, Container

"Perfekt" rechteckiger dynamischer Text [Duplikat] - css, dynamisch, Text, Breite, Container

Kann ein Container (vorzugsweise div) so gekürzt werden, dass der dynamisch eingefügte Text darin zu einem "perfekten" Rechteck wird, ohne die Höhe zu erhöhen?

<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/

Ich möchte dies mit einer einzigen CSS-Einstellung tun, wennmöglich, aber ich kann keinen finden. Ich möchte auch eine Schleife in Javascript vermeiden, um dies zu tun, da ich dies mit vielen divs tun muss und ich nicht will, dass Leistung darunter leidet.

Leerzeichen scheinen nicht zu helfen, es sei denn, ich verwende es falsch.

Vielen Dank im Voraus!

Text ausrichten: begründen;

An sich hilft nicht: http://jsfiddle.net/Q7gcb/4/

max-width + text-align: justify;

Funktioniert entweder nicht: http://jsfiddle.net/Q7gcb/5/

Antworten:

1 für die Antwort № 1

Ich glaube, dass das, was Sie suchen, gefunden werden kann Hier

"In DTP- und Textverarbeitungsanwendungen wird diese Option als" Rechtfertigen "bezeichnet. Leider ist dies in CSS keine Option."


1 für die Antwort № 2
div {text-align: justify;}​

Und Sie sollten auch den Breitenwert einstellen.


0 für die Antwort № 3

Stellen Sie das ein max-width und text-align zu justify.

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

Demo


0 für die Antwort № 4

Versuche dies.

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/