Zarovnání textu poslední - Triky CSS

text-align-lastumožňuje ovládat zarovnání posledního (nebo jediného) řádku textu těsně před vynuceným zalomením řádku - například konec odstavce nebo řádek těsně před značkou.

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

V době psaní tohoto článku podporují pouze prohlížeče Mozilla a Internet Explorer text-align-last(s předponami dodavatelů) a každý z nich má mírně odlišnou implementaci. Vlastnost měla začít pracovat v Chrome 35, ale od Chrome 40 stále vyžaduje experimentální příznak webových platforem. Více podrobností o implementaci prohlížeče v bodech zájmu.

Hodnoty

left zarovná poslední řádek textu nalevo od kontejneru.
rightzarovná poslední řádek textu napravo od kontejneru.
center vycentruje poslední řádek textu v kontejneru.
justify zarovná poslední řádek textu tak, aby překlenul celou šířku kontejneru a v případě potřeby vložil mezi slova mezeru, aby se délka řádku zvětšila.
startzarovná text na „začátek“ řádku na základě directiontextu - vlevo pro jazyky LTR, vpravo pro jazyky RTL.
endzarovná poslední řádek na „konec“ řádku na základě directiontextu - vpravo pro jazyky LTR, vlevo pro jazyky RTL.
autovýchozí. Zarovná poslední řádek textu tak, aby odpovídal vlastnosti prvku text-align, pokud je nastavena. Pokud není nastaven, autozarovná text na začátek.
inheritpoužije text-align-lastvlastnost nadřazeného prvku.

Ukázka

Tato ukázka ukazuje různé text-align-lasthodnoty v akci. Poznámka: Internet Explorer nepodporuje hodnoty startnebo end.

Podívejte se na Pen text-align-last od CSS-Tricks (@ css-tricks) na CodePen.

Body zájmu

V aplikaci Internet Explorer text-align-lastfunguje , pouze když je text-alignzbytek textu ve vybraném prvku nastaven na justify. IE také nerozpozná hodnotu startnebo end.

V prohlížečích Mozilla text-align-lastbude fungovat na posledním řádku před vynuceným přerušením řádku, i když pro zbytek textu v prvku není zadáno žádné zarovnání.

Také stojí za to vědět, že text-align-lastnastaví zarovnání pro všechny poslední řádky ve vybraném prvku, nejen pro absolutně poslední řádek textu. Například pokud máte v sobě divpět odstavců, vaše text-align-lastprohlášení se použije na poslední řádek každého z odstavců.

Pokud chcete použít text-align-lastpouze na posledním řádku v kontejneru, můžete použít :last-childnebo :last-of-type. Váš CSS by vypadal nějak takto:

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

V ukázce níže ukazuje levá strana text-align-last: center;aplikovanou na div s několika odstavci uvnitř. Všimněte si, že poslední řádek každého odstavce je vycentrován. Na pravé straně se zobrazí text-align-last: center;použití pouze na poslední odstavec uvnitř div pomocí :last-child.

Podívejte se na Pen text-align-last od CSS-Tricks (@ css-tricks) na CodePen.

Příbuzný

zarovnání textu
odsazení textu

Více informací

zarovnání textu poslední v textovém modulu CSS úrovně 3 (W3C)
zarovnání textu poslední na MDN
text-align-last na MSDN
text-align-last na týmovém blogu webové platformy Adobe
Chyba Webkit 76173, týkající se implementace prohlížeče Chrome text-align-last