Text-align-last - CSS-Tricks

Anonim

text-align-lastMit dieser Option können Sie die Ausrichtung der letzten (oder einzigen) Textzeile direkt vor einem erzwungenen Zeilenumbruch steuern, z. B. das Ende eines Absatzes oder die Zeile direkt vor einem
Tag.

.intro-graph ( text-align-last: center; )

Zum Zeitpunkt dieses Schreibens unterstützen nur Mozilla-Browser und Internet Explorer text-align-last(mit Herstellerpräfixen) und jeder hat eine etwas andere Implementierung. Die Eigenschaft sollte in Chrome 35 funktionieren, ab Chrome 40 ist jedoch weiterhin das Flag für experimentelle Webplattformen erforderlich. Weitere Details zu Browser-Implementierungen finden Sie in den Points of Interest.

Werte

  • left Richtet die letzte Textzeile links vom Container aus.
  • rightRichtet die letzte Textzeile rechts vom Container aus.
  • center zentriert die letzte Textzeile im Container.
  • justify Richtet die letzte Textzeile so aus, dass sie sich über die gesamte Breite des Containers erstreckt, und fügt bei Bedarf Leerzeichen zwischen den Wörtern ein, um die Zeilenlänge zu erhöhen.
  • startRichtet den Text am „Anfang“ der Zeile basierend auf directiondem Text aus - links für LTR-Sprachen, rechts für RTL-Sprachen.
  • endRichtet die letzte Zeile am „Ende“ der Zeile basierend auf directiondem Text aus - rechts für LTR-Sprachen, links für RTL-Sprachen.
  • autoder Standard. Richtet die letzte Textzeile so aus text-align, dass sie mit der Eigenschaft des Elements übereinstimmt , sofern diese festgelegt ist. Wenn es nicht festgelegt ist, autorichtet es den Text am Anfang aus.
  • inheritWendet die text-align-lastEigenschaft des übergeordneten Elements an.

Demo

Diese Demo zeigt die verschiedenen text-align-lastWerte in Aktion. Hinweis: Internet Explorer unterstützt die Werte startoder nicht end.

Siehe den Text text-align-last by CSS-Tricks (@ css-Tricks) auf CodePen.

Sehenswürdigkeiten

Funktioniert in Internet Explorer text-align-lastnur, wenn der text-alignRest des Texts im ausgewählten Element auf gesetzt ist justify. Außerdem erkennt der IE den Wert startoder endnicht.

In Mozilla-Browsern text-align-lastwird die letzte Zeile vor einem erzwungenen Zeilenumbruch bearbeitet, auch wenn für den Rest des Texts im Element keine Ausrichtung angegeben ist.

Es ist auch wichtig zu wissen, dass text-align-lastdie Ausrichtung für alle letzten Zeilen innerhalb des ausgewählten Elements festgelegt wird, nicht nur für die absolute letzte Textzeile. Wenn Sie beispielsweise einen divmit fünf Absätzen haben, gilt Ihre text-align-lastErklärung für die letzte Zeile jedes Absatzes.

Wenn Sie text-align-lastnur die allerletzte Zeile im Container verwenden möchten , können Sie möglicherweise :last-childoder verwenden :last-of-type. Ihr CSS würde ungefähr 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, wie text-align-last: center;sie auf ein Div mit mehreren Absätzen angewendet wird. Beachten Sie, dass die letzte Zeile jedes Absatzes zentriert ist. Die rechte Seite zeigt text-align-last: center;nur angewendet auf den letzten Absatz innerhalb des div mit :last-child.

Siehe den Text text-align-last by CSS-Tricks (@ css-Tricks) auf CodePen.

verbunden

  • Textausrichtung
  • Texteinzug

Mehr Informationen

  • text-align-last im CSS-Textmodul Level 3 (W3C)
  • Text-Align-Last bei MDN
  • Text-Align-Last bei MSDN
  • text-align-last im Blog des Adobe-Webplattform-Teams
  • Webkit-Fehler 76173 bezüglich der Implementierung von Chrome text-align-last

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
35+ mit experimentellen Flaggen Nee 34+ (vorangestellt) Nee 5.5+ (vorangestellt) Nee Nee