Tekst uitvullen - CSS-trucs | CSS Almanac 2025

De text-justifyeigenschap in CSS is een aanvulling op de text-aligneigenschap die wordt gebruikt om de uitvullingsmethode van tekst in te stellen wanneer deze text-alignis ingesteld op de justifywaarde.

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

Waarden

inter-word: Geeft aan dat tekst wordt uitgevuld door de afstand tussen woorden aan te passen, waardoor in feite extra woordafstand wordt gecreëerd. Dit is in feite een variatie op het word-spacingonroerend goed.
inter-character: Geeft aan dat de tekst wordt gerechtvaardigd door de afstand tussen de tekens aan te passen, waardoor in feite extra tekenafstand wordt gecreëerd. Dit is in feite een variatie op het letter-spacingonroerend goed.
auto: Hiermee kan de browser bepalen of de rechtvaardiging beter kan worden afgehandeld als inter-wordof inter-character. Dit kan handig zijn in meertalige scenario's waarin de inhoudstaal onbekend is totdat deze wordt weergegeven, waardoor de user-agent van de browser dienovereenkomstig kan kiezen op basis van welke methode het beste past bij de taalcontext.
none: Schakelt rechtvaardigingsmethoden uit, verwijdert effectief alle rechtvaardigingsmogelijkheden of overschrijft waar een rechtvaardigingsmethode in de cascade kan voorkomen.

Wat is rechtvaardiging precies?

Uitgevulde tekst is een mooie manier om te zeggen hoe tekst het vak vult waarin deze zich bevindt. In feite bent u misschien al goed bekend met het uitvullen van tekst en weet u het zelfs niet. Als u ooit tekstbewerkingssoftware zoals Word en Google Docs heeft gebruikt, kent u deze pictogrammen wellicht:

Opties voor tekstuitlijning en uitvulling in de Google Documenten-werkbalk

De eerste drie stellen de tekstuitlijning in, net als de CSS- text-aligneigenschap, waar de tekst links, rechts of volledig gecentreerd kan worden uitgelijnd.

Dat vierde pictogram is de uitvullingsoptie en het vertelt de inhoud om de volledige breedte van het document te vullen, zodat elke regel tot aan de rand loopt, ongeacht of het de afstand tussen woorden beïnvloedt.

Als u inhoud in Google Documenten uitvult, wordt ruimte tussen woorden toegevoegd om op elke regel de volledige documentbreedte te beslaan

De text-justifyeigenschap stelt ons in staat hetzelfde te doen, maar met extra flexibiliteit om te bepalen of de spatiëringmethode die wordt gebruikt om de inhoud te rechtvaardigen, wordt beheerd tussen woorden of tekens.

Browser-ondersteuning

De text-justifyeigenschap is opgenomen in de CSS-tekstmodule Level 3-specificatie, die momenteel de status Editor's Draft heeft op het moment van schrijven.

Deze eigenschap wordt momenteel vermeld als "met risico" om te worden geschrapt in de kandidaataanbevelingsperiode. Als zodanig wordt het niet aanbevolen om deze eigenschap in productie te gebruiken, aangezien het onwaarschijnlijk is dat deze in de nabije toekomst als standaard in alle browsers zal worden toegepast.

De huidige ondersteuning is beperkt tot Firefox 55+. Internet Explorer 11 en Edge 14+ ondersteunen ook de eigenschap, maar alleen de inter-wordwaarde en niet-officiële waarden die niet zijn opgenomen in de W3C-specificatie.

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.