CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS provides a wide range of properties to style the text and layout of a web page. One such property is text-justify.
The text-justify property is used to control the alignment and spacing of text in a block container. It is used to specify how the last line of a block or a line of text should be aligned and spaced. The text-justify property is used to distribute the space between the words in a line of text, which can help to improve the readability of the text.
The text-justify property is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge.
The syntax for the text-justify property is as follows:
selector {
text-justify: auto|inter-word|inter-character|none;
}
The text-justify property can take one of the following values:
Let's take a look at some examples of how the text-justify property can be used:
In this example, the text-justify property is set to auto. This is the default value, and the browser will automatically justify the text based on the available space:
<p style="text-justify: auto;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
In this example, the text-justify property is set to inter-word. The space between the words in a line of text is distributed to justify the text:
<p style="text-justify: inter-word;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
In this example, the text-justify property is set to inter-character. The space between the characters in a line of text is distributed to justify the text:
<p style="text-justify: inter-character;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
In this example, the text-justify property is set to none. The text is not justified:
<p style="text-justify: none;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
The text-justify property is a useful CSS property that can be used to control the alignment and spacing of text in a block container. It can help to improve the readability of the text by distributing the space between the words or characters in a line of text. By using the text-justify property, you can create a more professional and polished look for your web pages.