Text-align-last - CSS-Tricks

Anonim

text-align-lastvă permite să controlați alinierea ultimei (sau numai) linii de text chiar înainte de o întrerupere forțată - de exemplu sfârșitul unui paragraf sau linia chiar înainte de o
etichetă.

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

La momentul scrierii acestui articol, numai browserele Mozilla și Internet Explorer acceptă text-align-last(cu prefixe ale furnizorului) și fiecare are o implementare ușor diferită. Proprietatea trebuia să înceapă să funcționeze în Chrome 35, dar începând cu Chrome 40 necesită în continuare semnalizarea platformelor web experimentale. Mai multe detalii despre implementările browserului în punctele de interes.

Valori

  • left aliniază ultima linie de text la stânga containerului.
  • rightaliniază ultima linie de text la dreapta containerului.
  • center centrează ultima linie de text în container.
  • justify justifică ultima linie de text, astfel încât să se întindă pe întreaga lățime a containerului, inserând spațiu între cuvinte, dacă este necesar pentru a crește lungimea liniei.
  • startaliniază textul la „începutul” liniei pe baza directiontextului - stânga pentru limbile LTR, dreapta pentru limbile RTL.
  • endaliniază ultima linie la „sfârșitul” liniei pe baza directiontextului - dreapta pentru limbile LTR, stânga pentru limbile RTL.
  • autoimplicit. Aliniază ultima linie de text pentru a se potrivi cu text-alignproprietatea elementului , dacă este setată. Dacă nu este setat, autoaliniază textul la început.
  • inheritaplică text-align-lastproprietatea elementului părinte.

Demo

Această demonstrație arată diferitele text-align-lastvalori în acțiune. Notă: Internet Explorer nu acceptă valorile startsau end.

Vedeți Pen text-align-last de CSS-Tricks (@ css-tricks) pe CodePen.

Puncte de interes

În Internet Explorer, text-align-lastfuncționează numai atunci când text-alignrestul textului din elementul selectat este setat la justify. De asemenea, IE nu recunoaște startsau endvaloarea.

În browserele Mozilla, text-align-lastva funcționa pe ultima linie înainte de o întrerupere forțată a liniei, chiar dacă nu există nicio aliniere specificată pentru restul textului din element.

De asemenea, merită să știți că text-align-lastsetează alinierea pentru toate ultimele linii din elementul selectat, nu doar pentru ultima linie absolută a textului. Deci, de exemplu, dacă aveți un divcu cinci paragrafe, text-align-lastdeclarația dvs. se va aplica la ultimul rând al fiecăruia dintre paragrafe.

Dacă doriți să utilizați text-align-lastdoar pe ultima linie din container, este posibil să puteți utiliza :last-childsau :last-of-type. CSS ar arăta cam așa:

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

În demonstrația de mai jos, partea stângă arată text-align-last: center;aplicată unui div cu mai multe paragrafe în interiorul său. Observați că ultima linie a fiecărui paragraf este centrată. Partea dreaptă se text-align-last: center;aplică numai ultimului paragraf din div folosind :last-child.

Vedeți Pen text-align-last de CSS-Tricks (@ css-tricks) pe CodePen.

Legate de

  • aliniere text
  • text-indent

Mai multe informatii

  • text-align-last în CSS Text Module Level 3 (W3C)
  • text-align-last la MDN
  • text-align-last la MSDN
  • text-align-last pe blogul echipei platformei web Adobe
  • Webkit Bug 76173, referitor la implementarea Chrome de text-align-last

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
35+ cu steaguri experimentale nu 34+ (prefixat) nu 5.5+ (prefixat) nu nu