Text-align-last - CSS-tricks

Anonim

text-align-lastlåter dig styra inriktningen av den sista (eller enda) textraden precis före en tvångsradbrytning - till exempel slutet på ett stycke eller raden precis före en
tagg.

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

När detta skrivs stöds endast Mozilla-webbläsare och Internet Explorer text-align-last(med leverantörsprefix), och alla har en något annorlunda implementering. Fastigheten var tänkt att börja fungera i Chrome 35, men från och med Chrome 40 kräver det fortfarande den experimentella webbplattformsflaggan. Mer information om webbläsarimplementeringar i Intressanta platser.

Värden

  • left justerar den sista raden med text till vänster om behållaren.
  • rightjusterar den sista raden med text till höger om behållaren.
  • center centrerar den sista textraden i behållaren.
  • justify motiverar den sista textraden så att den sträcker sig över hela behållarens bredd och infogar mellanrum mellan ord om det behövs för att öka radlängden.
  • startjusterar texten till "början" på raden baserat på directiontexten - vänster för LTR-språk, höger för RTL-språk.
  • endjusterar den sista raden till "slutet" på raden baserat på directiontexten - höger för LTR-språk, vänster för RTL-språk.
  • autostandarden. Justerar den sista raden med text så att den matchar elementets text-alignegenskap, om den är inställd. Om det inte är inställt autojusterar du texten till början.
  • inherittillämpar text-align-lastegenskapen för det överordnade elementet.

Demo

Denna demo visar de olika text-align-lastvärdena i aktion. Obs! Internet Explorer stöder inte värdena starteller end.

Se pennan text-align-last av CSS-Tricks (@ css-tricks) på CodePen.

Intressanta platser

I Internet Explorer text-align-lastfungerar bara när text-alignresten av texten i det valda elementet är inställt på justify. Dessutom känner IE inte igen värdet starteller end.

I Mozilla-webbläsare text-align-lastkommer den att fungera på den sista raden innan en tvångsrad bryts även om det inte finns någon justering angiven för resten av texten i elementet.

Det är också värt att veta att text-align-lastställer in justeringen för alla sista rader inom det valda elementet, inte bara den absoluta sista raden med text. Så om du till exempel har en divmed fem stycken i kommer din text-align-lastdeklaration att gälla för den sista raden i vart och ett av styckena.

Om du bara vill använda text-align-lastden allra sista raden i behållaren kan du kanske använda :last-childeller :last-of-type. Din CSS skulle se ut så här:

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

I demonstrationen nedan visar vänster sida text-align-last: center;tillämpad på en div med flera stycken inuti. Observera att den sista raden i varje stycke är centrerad. Den högra sidan visar text-align-last: center;endast tillämpad på det sista stycket inuti div med :last-child.

Se pennan text-align-last av CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

  • textjustera
  • textindrag

Mer information

  • text-align-last i CSS Text Module Level 3 (W3C)
  • text-align-last vid MDN
  • text-align-last vid MSDN
  • text-align-last på Adobes webbplattforms teamblogg
  • Webkit Bug 76173, angående Chromes implementering av text-align-last

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
35+ med experimentella flaggor Nej 34+ (prefix) Nej 5.5+ (prefix) Nej Nej