webentwicklung-frage-antwort-db.com.de

Justieren Sie die letzte Zeile eines Div.

Ich denke nicht das "Warum?" Diese Frage ist wichtig ... aber ich muss die letzte Textzeile aus einemDIVtext-align:justify schreiben. Normalerweise ist die letzte Zeile (oder die erste Zeile, wenn es keine anderen Zeilen gibt, was der aktuelle Fall ist) eines div nicht gerechtfertigt, sondern links ausgerichtet. Ich weiß, es macht vielleicht überhaupt keinen Sinn, aber ich brauche unbedingt die letzte Zeile, um gerechtfertigt zu sein!

38
JCOC611

Hier ist eine Cross-Browser-Methode, die in IE6 + funktioniert

Es kombiniert Text-Align-Last: gerechtfertigt; was von IE und einer Variation der: after Pseudo-Content-Methode unterstützt wird. Es enthält ein Update, um zusätzlichen Platz zu entfernen, der nach einzeiligen Textelementen hinzugefügt wird. 

CSS:

p, h1{
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

Wenn Sie eine Textzeile haben, verwenden Sie diese Option, um die leere Zeile zu verhindern, die das obige CSS verursacht.

h1{
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

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

Weitere Details: http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

77
Kristin

Dies ist der sauberste Hack, den ich finden könnte. Ihre Laufleistung kann variieren.

Ich habe mein Beispiel in IE8, Firefox, Chrome, Opera und Safari getestet.

IE7 implementiert die :after-Pseudoklasse nicht, sodass sie dort nicht funktioniert.

Wenn Sie Unterstützung für IE7 benötigen, würde es wahrscheinlich funktionieren, den " ___" in eine fremde span am Ende der div zu stecken (verwenden Sie JS?).

Live-Demo ( siehe Code )

CSS:

div {
    width: 618px;        
    text-align: justify
}
div:after {
    content: " __________________________________________________________";
    line-height: 0;
    visibility: hidden
}

HTML:

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dui dolor, bibendum quis accumsan porttitor, fringilla sed libero. Phasellus felis ante, egestas at adipiscing lobortis, lobortis id mi. Praesent pulvinar dictum purus. Duis rhoncus bibendum vehicula. Vestibulum mollis, metus a consectetur semper, urna enim sollicitudin lacus, vel imperdiet turpis nisl at metus. Integer iaculis pretium dui, a viverra dolor lobortis pellentesque. Aliquam quis felis nec purus semper interdum. Nam ac dolor in sem tincidunt egestas. Ut nisl tortor, laoreet eu vestibulum id, bibendum at ipsum. Maecenas elementum bibendum orci, ac eleifend felis tincidunt in. Fusce elementum lacinia feugiat.
</div>

Leider scheint die div eine Zeile größer zu machen, als sie sein muss.

11
thirtydot

Diese Methode hat für mich funktioniert:

Dieser Trick heißt "Ben Justification". *

Nun, es ist noch nicht alles mit css, Sie müssen am Ende der Zeile noch etwas hinzufügen. Der Markup für die Überschrift oben ist ...

<h1 id="banner">
    How to justify a single line of text with css<span> &nbsp;</span>
</h1>

Der kleine Zusatz am Zeilenende löst die Ausrichtung der Zeile aus, indem eine neue Zeile gestartet wird. Der zusätzliche Inhalt (<span> &nbsp;</span>) wird für eine neue Zeile erzwungen, da der Abstand 1000px (mit Word-Abstand) ist und &nbsp; wie ein Word behandelt wird. Die zusätzliche Zeile wird nicht angezeigt, da die Schriftgröße auf 0px gesetzt ist.

Update vom 23.01.11: Ich habe gerade das Markup dahingehend aktualisiert, dass ein Leerzeichen hinter dem Bereich eingefügt wird und die Schriftgröße für den Bereich auf 1px gesetzt wird: Dies ist für IE8 erforderlich. Vielen Dank an Mamoun Gadir für den Hinweis auf die Probleme von IE.

Die CSS für die Überschrift oben ist ...

h1#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}

h1#banner span {
font-size: 1px ;
Word-spacing: 1000px;
}

* Wenn nicht der Nachweis erbracht wird, dass diese Technik zuvor veröffentlicht wurde, nenne ich diese Technik hier "Ben-Begründung" und erkläre sie für alle frei.

Ben Clay, Januar 2010.

Quelle: http://www.evolutioncomputing.co.uk/technical-1001.html

9
Jacqui

CSS3 bietet hierfür eine Lösung in Form von text-align-last, siehe http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last

4
kander

Angenommen, ich arbeite mit divs, die "aus irgendeinem Grund" (es gibt einen ziemlich guten Grund) nur eine Zeile haben kann ... und ich möchte sie rechtfertigen.

Warum verwenden Sie nicht text-align: justify;Es rechtfertigt jede Zeile. Auch wenn es nur eine Zeile gibt.

Edit: Ich denke, Sie suchen dies , wie Scragz gesagt hat. Dies funktioniert jedoch nur in IE 5.5 und IE 6.

1
Donovan

Ich hatte ein Problem, bei dem einige der obigen Antworten funktionierten, fügte jedoch unten eine sichtbare neue Linie hinzu - was nicht akzeptabel war, da die Box eine Hintergrundfarbe hatte. Ich habe die Begründung mit dem folgenden Code korrigiert:

jQuery:

$(".justify").each(function(index, element) {
    var original_height = $(this).height();
    $(this).append("<span style='display: inline-block;visibility: hidden;width:100%;'></span>");
    $(this).height(original_height);
});

HTML:

<div class="justify" style="width:100px; background-color:#CCC">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
1
Destralak

Da ist ein CSS3 IE 5.5/6 (Danke, CSS3.com , NOT!) - Eigenschaft mit dem Namen text-justify kann mit den folgenden Funktionen ausgeführt werden:

text-justify: distribute-all-lines;

Nicht sicher über die Browserunterstützung. Was für eine Abzocke.

1
scragz

Wenn der! DOCTYPE HTML5 ist, verursachen die Lösungen von Kristin und Jacqui eine zusätzliche Zeile, die schwer zu entfernen ist. Wenn es dich stört (wie ich), hier ist noch eine andere Idee:

<div style="display: flex;">
  Lorem <span style="flex:1;"></span>
  ipsum <span style="flex:1;"></span>
  dolor <span style="flex:1;"></span>
  sit...
</div>

Es hat noch weitere Nachteile: Funktioniert nur für einzeiligen Text und erfordert die Änderung des Inhalts wie oben gezeigt. Dies ist nicht immer Machbar/praktisch. Es gibt jedoch Situationen, in denen dies nicht das Problem ist (wie in meinem Fall). Es kann sogar nützlich sein, Die Positionen zu steuern, an denen der zusätzliche Platz eingefügt wird. Styles sind natürlich nur der Kürze halber inline . Ich habe es nur mit FFox/IE getestet.

0
robert4

Wenn auf das schließende div-Tag ein Zeilenumbruch folgt oder wenn das div-Tag eine äquivalente untere Auffüllung/Rand verwendet, können Sie dieses einfach durch eine abschließende unsichtbare Zeile aus geschützten Leerzeichen wie folgt ersetzen:

<div>This last line is now for all intents and purposes justified &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

Auch wenn dies nicht die schönste Lösung ist, ist sie wahrscheinlich die sicherste Cross-Browser-Lösung, da sie nicht auf einen nicht standardmäßigen Tweak angewiesen ist. Stellen Sie nur sicher, dass genügend "nbsp" -Zeichen vorhanden sind, um immer einen Zeilenumbruch zu verursachen, während Sie sich innerhalb eines sicheren Bereichs vom maximal zulässigen Wert einer einzelnen Zeile halten.

Warum sollte man das wollen? Nun, ich kann meine eigenen Gründe angeben, für wen es von Interesse sein kann. Es gibt Situationen, in denen Sie einen fortlaufenden Textblock oder Textabsatz aufteilen möchten, um Bilder, Tabellen oder wie in meinem Fall benutzerdefinierte Fußnoten direkt vor einem Seitenumbruch einzufügen. Wenn Sie dies tun, möchten Sie, dass die letzte Zeile unmittelbar vor dem Umbruch gerechtfertigt ist, da der Text direkt nach dem willkürlichen Umbruch fortgesetzt wird. In meinem Fall haben die Fußnoten eine variable Länge, so dass ich sie manuell eingeben muss. Daher muss ich auch den Textblock manuell aufteilen und die Ausrichtung der letzten Zeile vor dem Umbruch manuell erzwingen. Mir ist keine automatisierte Lösung bekannt, die auch Cross-Browser-kompatibel ist, aber das Hinzufügen einer Reihe von Leerzeichen ist für mich zumindest die Aufgabe ...

0
abvgd