Zarovnať text-posledný - Triky CSS

text-align-lastumožňuje ovládať zarovnanie posledného (alebo jediného) riadku textu tesne pred vynúteným zlomom riadku - napríklad koniec odseku alebo riadok tesne pred značkou.

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

V čase písania tohto článku podporovali iba prehliadače Mozilla a Internet Explorer text-align-last(s predponami dodávateľov). Každý z nich má trochu inú implementáciu. Vlastníctvo malo začať fungovať v prehliadači Chrome 35, ale od prehliadača Chrome 40 stále vyžaduje príznak experimentálnej webovej platformy. Viac podrobností o implementácii prehľadávača v bodoch záujmu.

Hodnoty

left zarovná posledný riadok textu naľavo od kontajnera.
rightzarovná posledný riadok textu napravo od kontajnera.
center vycentruje posledný riadok textu v kontajneri.
justify zarovná posledný riadok textu tak, aby preklenul celú šírku kontajnera, a ak je to potrebné, medzi slová vloží medzeru a predĺži ju.
startzarovná text na „začiatok“ riadku na základe directiontextu - vľavo pre jazyky LTR, vpravo pre jazyky RTL.
endzarovná posledný riadok na „koniec“ riadku na základe directiontextu - vpravo pre jazyky LTR, vľavo pre jazyky RTL.
autopredvolené. Zarovná posledný riadok textu tak, aby zodpovedal vlastnosti prvku text-align, ak je nastavená. Ak nie je nastavený, autozarovná text na začiatok.
inheritpoužije text-align-lastvlastnosť nadradeného prvku.

Ukážka

Táto ukážka zobrazuje rôzne text-align-lasthodnoty v akcii. Poznámka: Internet Explorer nepodporuje hodnoty startalebo end.

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

Body záujmu

V prehliadači Internet Explorer text-align-lastfunguje , iba ak je text-alignzvyšok textu vo vybranom prvku nastavený na justify. IE tiež nerozpoznáva hodnotu startalebo end.

V prehliadačoch Mozilla text-align-lastbude pracovať na poslednom riadku pred núteným zlomom riadku, aj keď pre zvyšok textu v prvku nie je zadané zarovnanie.

Je tiež potrebné vedieť, že sa text-align-lastnastaví zarovnanie pre všetky posledné riadky vo vybranom prvku, nielen pre absolútne posledný riadok textu. Napríklad ak máte napríklad písmeno divs piatimi odsekmi, vaše text-align-lastvyhlásenie sa bude vzťahovať na posledný riadok každého z odsekov.

Ak chcete použiť text-align-lastiba posledný riadok v kontajneri, môžete použiť :last-childalebo :last-of-type. Váš CSS by vyzeral asi takto:

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

V ukážke nižšie zobrazuje ľavá strana text-align-last: center;použité pre div s viacerými odsekmi. Všimnite si, že posledný riadok každého odseku je vycentrovaný. Pravá strana zobrazuje text-align-last: center;použité iba na posledný odsek vo vnútri div pomocou :last-child.

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

Súvisiace

zarovnať text
odsadenie textu

Viac informácií

text-align-last v textovom module CSS úrovne 3 (W3C)
zarovnať text posledný na MDN
text-align-last na MSDN
text-align-last na tímovom blogu webovej platformy spoločnosti Adobe
Chyba Webkit 76173, ktorá sa týka implementácie prehliadača Chrome text-align-last