Text-align-last - CSS-triki

Anonim

text-align-lastvam omogoča nadzor poravnave zadnje (ali edine) vrstice besedila tik pred prisilnim prelomom vrstice - na primer konec odstavka ali vrstica tik pred
oznako.

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

V času pisanja tega zapisa podpirajo samo brskalniki Mozilla in Internet Explorer text-align-last(s predponami ponudnikov), vsak pa ima nekoliko drugačno izvedbo. Lastnost naj bi začela delovati v Chromu 35, vendar od Chroma 40 še vedno zahteva zastavico poskusnih spletnih platform. Več podrobnosti o izvedbah brskalnikov v točkah zanimanja.

Vrednote

  • left poravna zadnjo vrstico besedila levo od vsebnika.
  • rightporavna zadnjo vrstico besedila na desni strani vsebnika.
  • center centrira zadnjo vrstico besedila v vsebniku.
  • justify utemelji zadnjo vrstico besedila, tako da obsega celotno širino vsebnika, po potrebi med besedami vstavi presledek za povečanje dolžine vrstice.
  • startporavna besedilo na "začetek" vrstice glede na directionbesedilo - levo za jezike LTR, desno za jezike RTL.
  • endporavna zadnjo vrstico na "konec" vrstice glede na directionbesedilo - desno za jezike LTR, levo za jezike RTL.
  • autoprivzeto. Zadnja vrstica besedila poravna tako, da se ujema z text-alignlastnostjo elementa , če je nastavljena. Če ni nastavljeno, autoporavna besedilo na začetek.
  • inherituporablja text-align-lastlastnost nadrejenega elementa.

Demo

Ta predstavitev prikazuje različne text-align-lastvrednosti v akciji. Opomba: Internet Explorer ne podpira vrednosti startali end.

Oglejte si Pen text-align-last by CSS-Tricks (@ css-tricks) na CodePen.

Zanimivosti

V Internet Explorerju text-align-lastdeluje samo, če je text-alignpreostalo besedilo v izbranem elementu nastavljeno na justify. Prav tako IE ne prepozna vrednosti startali endvrednosti.

V brskalnikih Mozilla text-align-lastbo delovalo v zadnji vrstici pred prisilnim prelomom vrstice, tudi če za preostali del besedila v elementu ni določena poravnava.

Vredno je tudi vedeti, da text-align-lastnastavi poravnavo za vse zadnje vrstice znotraj izbranega elementa, ne le za absolutno zadnjo vrstico besedila. Če imate na primer divpet s petimi odstavki, bo vaša text-align-lastizjava veljala za zadnjo vrstico vsakega od odstavkov.

Če želite uporabiti text-align-lastsamo zadnjo vrstico v vsebniku, boste morda lahko uporabili :last-childoz :last-of-type. Vaš CSS bi bil videti nekako takole:

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

V spodnji predstavitvi je leva stran prikazana, text-align-last: center;uporabljena za div z več odstavki v njem. Upoštevajte, da je zadnja vrstica vsakega odstavka odstavljena. Na desni strani so prikazani text-align-last: center;samo zadnji odstavek znotraj divja :last-child.

Oglejte si Pen text-align-last by CSS-Tricks (@ css-tricks) na CodePen.

Sorodno

  • poravnava besedila
  • zamik besedila

Več informacij

  • text-align-last v besedilnem modulu CSS 3. stopnje (W3C)
  • text-align-last na MDN
  • text-align-last pri MSDN
  • text-align-last na spletnem dnevniku skupine Adobejeve spletne platforme
  • Webkit Bug 76173, glede Chromove implementacije text-align-last

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
35+ z eksperimentalnimi zastavicami ne 34+ (predpona) ne 5,5+ (predpona) ne ne