Text-align-last - CSS-trucs | CSS Almanac 2025

text-align-lastlaat u toe om de uitlijning van de laatste (of enige) regel tekst vlak voor een geforceerde regeleinde te regelen - bijvoorbeeld het einde van een alinea of de regel vlak voor een tag.

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

Op het moment van schrijven waren alleen Mozilla-browsers en Internet Explorer-ondersteuning text-align-last(met leveranciersvoorvoegsels), en elk heeft een iets andere implementatie. De eigenschap zou gaan werken in Chrome 35, maar vanaf Chrome 40 is nog steeds de vlag voor experimentele webplatforms vereist. Meer informatie over browserimplementaties in de Nuttige Plaatsen.

Waarden

left lijnt de laatste tekstregel links van de container uit.
rightlijnt de laatste regel tekst rechts van de container uit.
center centreert de laatste regel tekst in de container.
justify rechtvaardigt de laatste regel tekst zodat deze de volledige breedte van de container beslaat, waarbij indien nodig ruimte tussen woorden wordt ingevoegd om de regellengte te vergroten.
startlijnt de tekst uit met het "begin" van de regel op basis directionvan de tekst - links voor LTR-talen, rechts voor RTL-talen.
endlijnt de laatste regel uit met het "einde" van de regel op basis directionvan de tekst - rechts voor LTR-talen, links voor RTL-talen.
autode standaard. Lijnt de laatste regel tekst uit zodat deze overeenkomt met de text-aligneigenschap van het element , als deze is ingesteld. Als het niet is ingesteld, wordt autode tekst uitgelijnd met het begin.
inheritpast de text-align-lasteigenschap van het bovenliggende element toe.

Demo

Deze demo toont de verschillende text-align-lastwaarden in actie. Opmerking: Internet Explorer ondersteunt de waarden startof niet end.

Zie de Pen text-align-last door CSS-Tricks (@ css-tricks) op CodePen.

Nuttige Plaatsen

In Internet Explorer text-align-lastwerkt dit alleen als de text-alignrest van de tekst in het geselecteerde element is ingesteld op justify. IE herkent ook niet de waarde startof end.

In Mozilla-browsers text-align-lastwerkt het op de laatste regel vóór een geforceerde regeleinde, zelfs als er geen uitlijning is gespecificeerd voor de rest van de tekst in het element.

Het is ook de moeite waard om te weten dat text-align-lastde uitlijning voor alle laatste regels binnen het geselecteerde element wordt ingesteld, niet alleen voor de absoluut laatste regel tekst. Dus als u bijvoorbeeld een divmet vijf alinea's heeft, is uw text-align-lastverklaring van toepassing op de laatste regel van elk van de alinea's.

Als u text-align-lastalleen de allerlaatste regel in de container wilt gebruiken, kunt u mogelijk :last-childof gebruiken :last-of-type. Uw CSS zou er ongeveer zo uitzien:

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

In de onderstaande demo ziet u aan de linkerkant text-align-last: center;toegepast op een div met meerdere alinea's erin. Merk op dat de laatste regel van elke alinea gecentreerd is. De rechterkant text-align-last: center;wordt alleen toegepast op de laatste alinea binnen de div met :last-child.

Zie de Pen text-align-last door CSS-Tricks (@ css-tricks) op CodePen.

Verwant

text-align
tekst streepje

Meer informatie

text-align-last in de CSS Text Module Level 3 (W3C)
text-align-last bij MDN
text-align-last op MSDN
text-align-last op Adobe's webplatformteamblog
Webkit Bug 76173, met betrekking tot Chrome's implementatie van text-align-last