Text-align-last - CSS-Tricks

Anonim

text-align-lastpozwala kontrolować wyrównanie ostatniego (lub jedynego) wiersza tekstu tuż przed wymuszonym łamaniem wiersza - na przykład koniec akapitu lub wiersz tuż przed
znacznikiem.

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

W chwili pisania tego tekstu obsługiwane były tylko przeglądarki Mozilla i Internet Explorer text-align-last(z prefiksami dostawców), a każda z nich ma nieco inną implementację. Właściwość miała zacząć działać w Chrome 35, ale od Chrome 40 nadal wymaga flagi eksperymentalnych platform internetowych. Więcej szczegółów na temat implementacji przeglądarek w Użytecznych Miejscach.

Wartości

  • left wyrównuje ostatni wiersz tekstu do lewej strony kontenera.
  • rightwyrównuje ostatni wiersz tekstu do prawej strony kontenera.
  • center wyśrodkowuje ostatni wiersz tekstu w kontenerze.
  • justify wyrównuje ostatni wiersz tekstu, tak aby zajmował całą szerokość kontenera, wstawiając w razie potrzeby spację między słowami, aby zwiększyć długość wiersza.
  • startwyrównuje tekst do „początku” wiersza na podstawie directiontekstu - po lewej dla języków LTR, po prawej dla języków RTL.
  • endwyrównuje ostatni wiersz do „końca” wiersza na podstawie directiontekstu - po prawej dla języków LTR, po lewej dla języków RTL.
  • autodomyślny. Wyrównuje ostatni wiersz tekstu, aby pasował do text-alignwłaściwości elementu , jeśli jest ustawiona. Jeśli nie jest ustawiona, autowyrównuje tekst do początku.
  • inheritstosuje text-align-lastwłaściwość elementu nadrzędnego.

Próbny

To demo pokazuje różne text-align-lastwartości w akcji. Uwaga: Internet Explorer nie obsługuje wartości startlub end.

Zobacz Pen text-align-last autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Użyteczne miejsca

W przeglądarce Internet Explorer text-align-lastdziała tylko wtedy, gdy text-alignreszta tekstu w wybranym elemencie jest ustawiona na justify. Ponadto IE nie rozpoznaje wartości startlub end.

W przeglądarkach Mozilli, text-align-lastbędzie działać na ostatniej linii przed wymuszonym łamaniem linii, nawet jeśli nie określono wyrównania dla reszty tekstu w elemencie.

Warto również wiedzieć, że text-align-lastustawia wyrównanie dla wszystkich ostatnich wierszy w wybranym elemencie, a nie tylko dla absolutnej ostatniej linii tekstu. Na przykład, jeśli masz znak divzawierający pięć akapitów, Twoja text-align-lastdeklaracja będzie dotyczyć ostatniego wiersza każdego z akapitów.

Jeśli chcesz użyć text-align-lasttylko w ostatnim wierszu kontenera, możesz użyć :last-childlub :last-of-type. Twój CSS wyglądałby mniej więcej tak:

#center-only-last p:last-child ( -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; )

W poniższym demo lewa strona przedstawia text-align-last: center;element div z wieloma akapitami w środku. Zwróć uwagę, że ostatni wiersz każdego akapitu jest wyśrodkowany. Prawa strona pokazuje text-align-last: center;zastosowane tylko do ostatniego akapitu wewnątrz elementu div przy użyciu :last-child.

Zobacz Pen text-align-last autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Związane z

  • wyrównywanie tekstu
  • wcięcie tekstu

Więcej informacji

  • text-align-last w module tekstowym CSS na poziomie 3 (W3C)
  • text-align-last w MDN
  • text-align-last w MSDN
  • text-align-last na blogu zespołu platformy internetowej Adobe
  • Błąd 76173 w Webkicie, dotyczący implementacji text-align-last

Wsparcie przeglądarki

Chrom Safari Firefox Opera TO ZNACZY Android iOS
35+ z eksperymentalnymi flagami nie 34+ (z prefiksem) nie 5.5+ (z prefiksem) nie nie