Definition
The text-justify CSS property is used to control the justification or alignment of text within its container when the text spans multiple lines. It specifies how to distribute the space between words and letters to achieve a visually pleasing and balanced appearance.
The text-justify property accepts several values:
-
auto: This is the default value. The browser applies the default justification behavior, which may vary between browsers. -
none: No justification is applied, and the text is displayed using the default alignment behavior of the container. -
inter-word: The space between words is adjusted to create even spacing and distribute any extra space evenly between words. -
inter-character: The space between individual characters is adjusted to create even spacing and distribute any extra space evenly between characters. -
distribute: The space between both words and characters is adjusted to create even spacing and distribute any extra space evenly between both.
Here’s an example:
.paragraph {
text-justify: inter-word;
}
In this example, the .paragraph class sets the text-justify property to inter-word, which justifies the text by adjusting the space between words to achieve even spacing.
It’s important to note that the text-justify property affects the alignment of text within its container only when it spans multiple lines. It doesn’t have any effect on single-line text or text that fits within a single line.
The text-justify property is primarily used for improving the appearance and readability of justified text, where the text is aligned both to the left and right edges of its container. It can be particularly useful for paragraphs or blocks of text in cases where achieving even spacing between words or characters is desirable.