Text-align-last - CSS-triks

Anonim

text-align-lastlar deg kontrollere justeringen av den siste (eller eneste) tekstlinjen rett før et tvungen linjeskift - for eksempel slutten av et avsnitt eller linjen rett før en
tag.

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

I skrivende stund støtter bare Mozilla-nettlesere og Internet Explorer text-align-last(med leverandørprefikser), og hver har en litt annen implementering. Eiendommen skulle begynne å fungere i Chrome 35, men fra og med Chrome 40 krever det fortsatt det eksperimentelle webplattformene. Mer detaljer om nettleserimplementeringer i interessepunktene.

Verdier

  • left justerer den siste tekstlinjen til venstre for beholderen.
  • rightjusterer den siste tekstlinjen til høyre for beholderen.
  • center sentrerer den siste tekstlinjen i containeren.
  • justify rettferdiggjør den siste tekstlinjen slik at den strekker seg over hele bredden på beholderen, og setter mellomrom mellom ordene om nødvendig for å øke linjelengden.
  • startjusterer teksten til "starten" på linjen basert på directionteksten - venstre for LTR-språk, høyre for RTL-språk.
  • endjusterer den siste linjen til "slutten" av linjen basert på directionteksten - høyre for LTR-språk, venstre for RTL-språk.
  • autoStandaren. Justerer den siste tekstlinjen for å matche elementets text-alignegenskap, hvis den er satt. Hvis det ikke er angitt, autojusterer du teksten til starten.
  • inheritbruker text-align-lasteiendommen til det overordnede elementet.

Demo

Denne demoen viser de forskjellige text-align-lastverdiene i aksjon. Merk: Internet Explorer støtter ikke verdiene starteller end.

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

Interessepunkt

I Internet Explorer text-align-lastfungerer det bare når text-alignresten av teksten i det valgte elementet er satt til justify. IE gjenkjenner heller ikke verdien starteller end.

I Mozilla-nettlesere text-align-lastvil den fungere på den siste linjen før et tvungen linjeskift, selv om det ikke er spesifisert noen justering for resten av teksten i elementet.

Det er også verdt å vite at text-align-lastangir justeringen for alle siste linjer i det valgte elementet, ikke bare den absolutte siste tekstlinjen. Så hvis du for eksempel har et divmed fem avsnitt, vil text-align-lasterklæringen gjelde for den siste linjen i hvert av avsnittene.

Hvis du bare vil bruke text-align-lastden aller siste linjen i containeren, kan du kanskje bruke :last-childeller :last-of-type. CSS-en din vil se ut slik:

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

I demoen nedenfor viser venstre side text-align-last: center;brukt på en div med flere avsnitt inne i den. Legg merke til at den siste linjen i hvert avsnitt er sentrert. Den høyre siden viser text-align-last: center;bare brukt til det siste avsnittet inne i div ved hjelp av :last-child.

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

I slekt

  • tekstjustering
  • tekstinnrykk

Mer informasjon

  • text-align-last i CSS Text Module Level 3 (W3C)
  • text-align-last ved MDN
  • text-align-last på MSDN
  • text-align-last på Adobes webblatt for teamplattform
  • Webkit Bug 76173, angående Chrome-implementering av text-align-last

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
35+ med eksperimentelle flagg Nei 34+ (prefiks) Nei 5.5+ (prefiks) Nei Nei