Text-align-last - CSS-tricks

Anonim

text-align-lastlader dig kontrollere justeringen af ​​den sidste (eller eneste) tekstlinje lige før et tvunget linjeskift - for eksempel slutningen af ​​et afsnit eller linjen lige før et
tag.

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

På tidspunktet for denne skrivning understøtter kun Mozilla-browsere og Internet Explorer text-align-last(med leverandørpræfikser), og hver har en lidt anden implementering. Ejendommen skulle begynde at arbejde i Chrome 35, men fra og med Chrome 40 kræver det stadig det eksperimentelle webplatformflag. Flere detaljer om browserimplementeringer i interessepunkterne.

Værdier

  • left justerer den sidste tekstlinje til venstre for containeren.
  • rightjusterer den sidste tekstlinje til højre for containeren.
  • center centrerer den sidste tekstlinje i containeren.
  • justify retfærdiggør den sidste tekstlinje, så den spænder over containerens fulde bredde og indsætter mellemrum mellem ord, hvis det er nødvendigt for at øge linjelængden.
  • startjusterer teksten til "start" på linjen baseret på directionteksten - venstre for LTR-sprog, højre for RTL-sprog.
  • endjusterer den sidste linje til "slutningen" af linjen baseret på directionteksten - højre for LTR-sprog, venstre for RTL-sprog.
  • autostandardindstillingen. Justerer den sidste tekstlinje, så den matcher elementets text-alignegenskab, hvis den er indstillet. Hvis det ikke er indstillet, autojusteres teksten til starten.
  • inheritanvender text-align-lastegenskaben for det overordnede element.

Demo

Denne demo viser de forskellige text-align-lastværdier i aktion. Bemærk: Internet Explorer understøtter ikke værdierne starteller end.

Se pennen tekstjuster-sidst af CSS-Tricks (@ css-tricks) på CodePen.

Interessepunkter

I Internet Explorer text-align-lastfungerer det kun, når text-alignresten af ​​teksten i det valgte element er indstillet til justify. IE genkender heller ikke værdien starteller end.

I Mozilla-browsere text-align-lastfungerer den på den sidste linje før et tvunget linjeskift, selvom der ikke er angivet nogen justering for resten af ​​teksten i elementet.

Det er også værd at vide, at text-align-lastindstiller justeringen for alle sidste linjer inden for det valgte element, ikke kun den absolutte sidste tekstlinje. Så hvis du f.eks. Har en divmed fem afsnit i, gælder din text-align-lasterklæring til den sidste linje i hvert af afsnit.

Hvis du kun vil bruge text-align-lastden sidste linje i containeren, kan du muligvis bruge :last-childeller :last-of-type. Din CSS ville se sådan ud:

#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;anvendt på en div med flere afsnit inde i den. Bemærk, at den sidste linje i hvert afsnit er centreret. Højre side viser text-align-last: center;kun anvendt til det sidste afsnit inde i div ved hjælp af :last-child.

Se pennen tekstjuster-sidst af CSS-Tricks (@ css-tricks) på CodePen.

Relaterede

  • tekstjustering
  • tekstindryk

Mere information

  • text-align-last i CSS Text Module Level 3 (W3C)
  • tekstjuster-sidst ved MDN
  • text-align-last ved MSDN
  • tekstjuster-sidst på Adobes webplatform-teamblog
  • Webkit Bug 76173, vedrørende Chrome's implementering af text-align-last

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
35+ med eksperimentelle flag Nix 34+ (præfiks) Nix 5.5+ (præfiks) Nix Nix