Tekst-rettferdiggjøre - CSS-triks

Anonim

Den text-justifyeiendom i CSS er en følgesvenn til text-aligneiendommen som brukes til å angi begrunnelsen metode for tekst når text-aligner satt til justifyverdien.

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

Verdier

  • inter-word: Spesifiserer at tekst er berettiget ved å justere avstanden mellom ord, og effektivt skape ekstra ordavstand. Dette er faktisk en variant av word-spacingeiendommen.
  • inter-character: Spesifiserer at teksten rettferdiggjøres ved å justere avstanden mellom tegn, og effektivt skape ekstra tegnavstand. Dette er faktisk en variant av letter-spacingeiendommen.
  • auto: Tillater nettleseren å avgjøre om begrunnelse blir bedre håndtert som inter-wordeller inter-character. Dette kan være nyttig i flerspråklige scenarier der innholdsspråket er ukjent før det er gjengitt, slik at nettleserens brukeragent kan velge tilsvarende basert på hvilken metode som passer bedre språksammenheng.
  • none: Deaktiver begrunnelsesmetoder, fjerner effektivt eventuelle begrunnelsesmuligheter, eller overstyrer hvor en begrunnelsesmetode kan forekomme i kaskaden.

Hva er rettferdiggjørelse?

Begrunnet tekst er en fancy måte å si hvordan tekst fyller boksen som inneholder den. Faktisk kan du allerede være godt kjent med rettferdiggjørende tekst og ikke engang vet det. Hvis du noen gang har brukt tekstredigeringsprogramvare som Word og Google Docs, kan du være kjent med disse ikonene:

Alternativer for tekstjustering og begrunnelse i Google Docs-verktøylinjen

De første tre angir tekstjusteringen, akkurat som CSS- text-alignegenskapen, der teksten kan justeres til venstre, høyre eller helt sentrert.

Det fjerde ikonet er rettferdiggjøringsalternativet, og det forteller innholdet å fylle hele bredden på dokumentet slik at hver linje flush rett til kanten, uavhengig av om det påvirker avstanden mellom ord.

Å rettferdiggjøre innhold i Google Dokumenter legger til avstand mellom ord for å oppta hele dokumentbredden på hver linje

Den text-justifyegenskapen tillater oss å gjøre det samme, men med ekstra fleksibilitet til å bestemme hvorvidt avstands metoden som brukes til å rettferdiggjøre innholdet styres mellom ord eller tegn.

Nettleserstøtte

Den text-justifyEiendommen er inkludert i CSS Text Modul Nivå 3-spesifikasjonen, som nå er i Redaktør Draft status på tidspunktet for dette skriftlig.

Denne eiendommen er for øyeblikket oppført som "i fare" for å bli droppet i kandidatanbefalingsperioden. Som sådan anbefales det ikke å bruke denne egenskapen i produksjon, da det er lite sannsynlig at den blir vedtatt som standard i alle nettlesere i nær fremtid.

Nåværende støtte er begrenset til Firefox 55+. Internet Explorer 11 og Edge 14+ støtter også eiendommen, men bare inter-wordverdien så vel som uoffisielle verdier som ikke er inkludert i W3C-spesifikasjonen.

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
Nei 55 11 18 Nei

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
Nei 85 Nei Nei