Tekst-retfærdiggøre - CSS-tricks

Anonim

Den text-justifyejendom i CSS er en ledsager til text-alignejendommen, der bruges til at indstille den begrundelse metode tekst, når text-aligner indstillet til den justifyværdi.

p ( text-align: justify; text-justify: inter-word; )

Værdier

  • inter-word: Angiver, at teksten er berettiget ved at justere afstanden mellem ord og effektivt skabe yderligere ordafstand. Dette er faktisk en variation af word-spacingejendommen.
  • inter-character: Angiver, at teksten skal rettes ved at justere afstanden mellem tegn, hvilket effektivt skaber yderligere tegnafstand. Dette er faktisk en variation af letter-spacingejendommen.
  • auto: Tillader browseren at afgøre, om retfærdiggørelse bedre håndteres som inter-wordeller inter-character. Dette kan være nyttigt i flersprogede scenarier, hvor indholdssproget er ukendt, indtil det gengives, så browserbrugeragenten kan vælge i overensstemmelse hermed baseret på hvilken metode der passer bedre til sprogkonteksten.
  • none: Deaktiverer berettigelsesmetoder, fjerner effektivt eventuelle begrundelsesmuligheder eller tilsidesætter hvor en begrundelsesmetode kan forekomme i kaskaden.

Hvad er retfærdiggørelse?

Begrundet tekst er en fancy måde at sige, hvordan tekst udfylder det felt, der indeholder det. Faktisk er du måske allerede godt bekendt med retfærdiggørelse af tekst og ikke engang kender den. Hvis du nogensinde har brugt tekstredigeringssoftware som Word og Google Docs, er du muligvis bekendt med disse ikoner:

Indstillinger for tekstjustering og begrundelse i Google Docs-værktøjslinjen

De første tre indstiller tekstjusteringen, ligesom CSS- text-alignegenskaben, hvor teksten kan justeres til venstre, højre eller helt centreret.

Det fjerde ikon er retfærdiggørelsesindstillingen, og det fortæller indholdet at udfylde hele dokumentets bredde, så hver linje flugter lige ud til kanten, uanset om det påvirker afstanden mellem ord.

Retfærdiggørelse af indhold i Google Docs tilføjer afstand mellem ord for at optage den fulde dokumentbredde på hver linje

Den text-justifyegenskab giver os mulighed for at gøre det samme, men med ekstra fleksibilitet til at afgøre, om den afstand, der anvendes til at retfærdiggøre indholdet styres mellem ord eller tegn.

Browsersupport

Den text-justifyEjendommen er inkluderet i CSS Tekst Modul niveau 3 specifikation, som i øjeblikket er i Redaktørens Udkast status på tidspunktet for dette skrives.

Denne ejendom er i øjeblikket angivet som "i fare" for at blive droppet i kandidatanbefalingsperioden. Som sådan anbefales det ikke at bruge denne ejendom til produktion, da det sandsynligvis ikke vil blive vedtaget som standard i alle browsere i den nærmeste fremtid.

Nuværende support er begrænset til Firefox 55+. Internet Explorer 11 og Edge 14+ understøtter også ejendommen, men kun inter-wordværdien såvel som uofficielle værdier, der ikke er inkluderet i W3C-specifikationen.

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
Ingen 55 11 18 Ingen

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
Ingen 85 Ingen Ingen