Text-justify - CSS-tricks

Anonim

Den text-justifyegendom i CSS är ett komplement till den text-alignegendom som används för att ställa motiveringen metoden text när text-alignär inställd på justifyvärdet.

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

Värden

  • inter-word: Anger att texten är motiverad genom att justera avståndet mellan ord och effektivt skapa ytterligare ordavstånd. Detta är faktiskt en variation av word-spacingfastigheten.
  • inter-character: Anger att texten rättfärdigas genom att justera avståndet mellan tecken, vilket effektivt skapar ytterligare teckenavstånd. Detta är faktiskt en variation av letter-spacingfastigheten.
  • auto: Tillåter webbläsaren att avgöra om motivering hanteras bättre som inter-wordeller inter-character. Detta kan vara till hjälp i flerspråkiga scenarier där innehållsspråket är okänt förrän det återges, vilket gör att webbläsarens användaragent kan välja utifrån vilken metod som passar bättre i språkkontexten.
  • none: Inaktiverar motiveringsmetoder, tar effektivt bort eventuella motiveringsmöjligheter eller åsidosätter där en motiveringsmetod kan förekomma i kaskaden.

Vad är rättfärdigande?

Motiverad text är ett snyggt sätt att säga hur text fyller rutan som innehåller den. Faktum är att du kanske redan är väl bekant med motiverande text och inte ens vet det. Om du någonsin har använt textredigeringsprogram som Word och Google Docs kanske du känner till dessa ikoner:

Alternativ för textjustering och motivering i Google Docs-verktygsfältet

De första tre ställer in textjusteringen, precis som CSS- text-alignegenskapen, där texten kan justeras till vänster, höger eller helt centrerad.

Den fjärde ikonen är det rättfärdiga alternativet och det ber innehållet att fylla hela dokumentets bredd så att varje rad spolas rakt mot kanten, oavsett om det påverkar avståndet mellan ord.

Att rättfärdiga innehåll i Google Docs lägger till avstånd mellan ord för att uppta hela dokumentbredden på varje rad

Den text-justifyegenskapen tillåter oss att göra samma sak, men med ytterligare flexibilitet för att avgöra om distans metod som används för att rättfärdiga innehållet hanteras mellan ord eller tecken.

Webbläsarstöd

Den text-justifyFastigheten ingår i CSS Text Module Nivå 3-specifikationen, som för närvarande i Redaktörens Utkast status vid tidpunkten för denna skrift.

Den här fastigheten är för närvarande listad som "i riskzonen" för att tappas under kandidatrekommendationsperioden. Som sådan rekommenderas det inte att använda den här egenskapen i produktion eftersom det troligtvis inte kommer att antas som standard i alla webbläsare inom en snar framtid.

Nuvarande support är begränsat till Firefox 55+. Internet Explorer 11 och Edge 14+ stöder också egenskapen, men endast inter-wordvärdet såväl som inofficiella värden som inte ingår i W3C-specifikationen.

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
Nej 55 11 18 Nej

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
Nej 85 Nej Nej