Text-align-last - CSS-gudrybės

Anonim

text-align-lastleidžia valdyti paskutinės (arba vienintelės) teksto eilutės lygiuotę prieš priverstinį eilučių pertraukimą, pavyzdžiui, pastraipos pabaigą arba eilutę priešais
žymą.

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

Rašymo metu palaikomos tik „Mozilla“ naršyklės ir „Internet Explorer“ text-align-last(su tiekėjo priešdėliais), ir kiekviena jų yra šiek tiek kitokia. Turtas turėjo pradėti veikti „Chrome 35“, tačiau nuo „Chrome 40“ vis tiek reikalinga eksperimentinių žiniatinklio platformų vėliava. Daugiau informacijos apie naršyklės diegimą „Lankytinos vietos“.

Vertybės

  • left sulygiuoja paskutinę teksto eilutę kairėje talpyklos.
  • rightsulygiuoja paskutinę teksto eilutę talpyklos dešinėje.
  • center sutelkia paskutinę sudėtinio rodinio teksto eilutę.
  • justify pateisina paskutinę teksto eilutę, kad ji apimtų visą konteinerio plotį, įterpdama tarpą tarp žodžių, jei reikia, kad padidėtų eilutės ilgis.
  • startsulygina tekstą su eilutės „pradžia“ pagal directiontekstą - kairė LTR kalboms, dešinė RTL kalboms.
  • endpaskutinę eilutę sulygiuoja su eilutės „pabaiga“, remiantis directiontekstu - dešinė LTR kalboms, kairė RTL kalboms.
  • autonumatytasis. Sulygiuoja paskutinę teksto eilutę, kad ji atitiktų elemento text-alignypatybę, jei ji nustatyta. Jei jis nenustatytas, autosulygiuokite tekstą su pradžia.
  • inherittaiko text-align-lastpirminio elemento ypatybę.

Demonstracija

Ši demonstracija rodo skirtingas veikimo text-align-lastvertes. Pastaba: „ Internet Explorer“ nepalaiko startarba endreikšmių.

„CodePen“ žr. CSS-Tricks (@ css-tricks) „Pen text-align-last“.

Lankytinos vietos

„Internet Explorer“ text-align-lastveikia tik tada text-align, kai likusi pasirinkto elemento teksto dalis yra nustatyta justify. Be to, IE neatpažįsta startir endvertės.

„Mozilla“ naršyklėse text-align-lastveiks paskutinėje eilutėje prieš priverstinį eilučių pertraukimą, net jei likusiam elemento tekstui nenurodytas lygiavimas.

Taip pat verta žinoti, kad text-align-lastnustatomas visų paskutinių pasirinkto elemento eilučių, o ne tik absoliučios paskutinės teksto eilutės, lygiavimas. Taigi, pavyzdžiui, jei jame yra a divsu penkiomis pastraipomis, jūsų text-align-lastdeklaracija bus taikoma paskutinei kiekvienos pastraipos eilutei.

Jei norite naudoti text-align-lasttik paskutinėje konteinerio eilutėje, galite naudoti :last-childarba :last-of-type. Jūsų CSS atrodys maždaug taip:

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

Žemiau esančioje demonstracijoje kairėje pusėje rodoma, kaip text-align-last: center;pritaikyti div, kuriame yra kelios pastraipos. Atkreipkite dėmesį, kad kiekvienos pastraipos paskutinė eilutė yra centre. Dešinėje pusėje rodomi text-align-last: center;taikymai tik paskutinei pastraipai, esančiai div viduje :last-child.

„CodePen“ žr. CSS-Tricks (@ css-tricks) „Pen text-align-last“.

Susijęs

  • sulyginti tekstą
  • teksto įtrauka

Daugiau informacijos

  • text-align-last CSS 3 lygio modulio modelyje (W3C)
  • text-align-last MDN
  • text-align-last MSDN
  • text-align-last „Adobe“ interneto platformos komandos tinklaraštyje
  • „Webkit Bug 76173“ dėl „Chrome“ diegimo text-align-last

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
35+ su eksperimentinėmis vėliavomis Ne 34+ (priešdėlis) Ne 5,5+ (priešdėlis) Ne Ne