Text-align-last | CSS-Tricks

text-align-last erlaubt Ihnen, die Ausrichtung der letzten (oder einzigen) Textzeile vor einem erzwungenen Zeilenumbruch zu steuern – zum Beispiel das Ende eines Absatzes oder die Zeile direkt vor einem <br>-Tag.

.intro-graph {
  text-align-last: center;
}

Zum Zeitpunkt des Schreibens unterstützen nur Mozilla-Browser und der Internet Explorer text-align-last (mit Vendor-Präfixen), und jeder hat eine leicht unterschiedliche Implementierung. Die Eigenschaft sollte in Chrome 35 zu funktionieren beginnen, aber ab Chrome 40 benötigt sie immer noch das experimentelle Web Platforms Flag. Mehr Details zu Browser-Implementierungen in den Punkten von Interesse.

Werte

left richtet die letzte Textzeile links vom Container aus.
right richtet die letzte Textzeile rechts vom Container aus.
center zentriert die letzte Textzeile innerhalb des Containers.
justify setzt die letzte Textzeile im Blocksatz, sodass sie die volle Breite des Containers ausfüllt, indem bei Bedarf Leerzeichen zwischen den Wörtern eingefügt werden, um die Zeilenlänge zu erhöhen.
start richtet den Text am „Anfang“ der Zeile basierend auf der direction des Textes aus – links für LTR-Sprachen, rechts für RTL-Sprachen.
end richtet die letzte Zeile am „Ende“ der Zeile basierend auf der direction des Textes aus – rechts für LTR-Sprachen, links für RTL-Sprachen.
auto der Standardwert. Richtet die letzte Textzeile so aus, dass sie mit der text-align-Eigenschaft des Elements übereinstimmt, falls diese gesetzt ist. Wenn sie nicht gesetzt ist, richtet auto den Text am Anfang aus.
inherit wendet die text-align-last-Eigenschaft des Elternelements an.

Demo

Diese Demo zeigt die verschiedenen text-align-last-Werte in Aktion. Hinweis: Der Internet Explorer unterstützt die Werte start oder end nicht.

Siehe den Pen text-align-last von CSS-Tricks (@css-tricks) auf CodePen.

Interessante Punkte

Im Internet Explorer funktioniert text-align-last nur, wenn der text-align des restlichen Textes im ausgewählten Element auf justify gesetzt ist. Außerdem erkennt IE den Wert start oder end nicht an.

In Mozilla-Browsern funktioniert text-align-last bei der letzten Zeile vor einem erzwungenen Zeilenumbruch, auch wenn für den restlichen Text im Element keine Ausrichtung angegeben ist.

Es ist auch erwähnenswert, dass text-align-last die Ausrichtung für alle letzten Zeilen innerhalb des ausgewählten Elements festlegt, nicht nur für die absolut letzte Textzeile. Wenn Sie also beispielsweise ein div mit fünf Absätzen haben, gilt Ihre text-align-last-Deklaration für die letzte Zeile jedes Absatzes.

Wenn Sie text-align-last nur auf die allerletzte Zeile im Container anwenden möchten, können Sie möglicherweise :last-child oder :last-of-type verwenden. Ihr CSS würde dann etwa so aussehen:

#center-only-last p:last-child {
  -ms-text-align-last: center;
  -moz-text-align-last: center;
  text-align-last: center;
}

In der folgenden Demo zeigt die linke Seite text-align-last: center;, angewendet auf ein div mit mehreren darin enthaltenen Absätzen. Beachten Sie, dass die letzte Zeile jedes Absatzes zentriert ist. Die rechte Seite zeigt text-align-last: center;, angewendet nur auf den letzten Absatz im div mithilfe von :last-child.

Siehe den Pen text-align-last von CSS-Tricks (@css-tricks) auf CodePen.

Verwandt

Weitere Informationen

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
35+ mit experimentellen Flags	Nein	34+ (mit Präfix)	Nein	5.5+ (mit Präfix)	Nein	Nein

Dragonymous

# 26. September 2016

Wenn es nur eine Zeile Text gibt, wird diese ebenfalls als „letzte“ betrachtet, was vielleicht nicht gewünscht ist.

Antworten

gcyrillus

Permalink zum Kommentar# 6. April 2017

Wenn ein Element als Flexbox angezeigt wird, scheint text-align-last nicht angewendet zu werden, wenn die erste Zeile auch die letzte ist.

Testen Sie im letzten Codepen dieses Artikels: #center h2 {display:flex;} oder den geforkten Pen: http://codepen.io/gc-nomade/pen/pemOJR