CODESCRACKER

CSS text-justify

The CSS text-justify property is used to justify the text whose text-align property is set to justify. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p{text-align: justify; text-justify: inter-word;}
   </style>
</head>
<body>
   
   <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque
      laudantium nemo molestiae odit voluptas maxime aliquid recusandae
      esse excepturi inventore tenetur, similique quisquam provident
      repellendus ea explicabo voluptatem neque a, repudiandae, deserunt
      hic id blanditiis corporis?</p>
   
</body>
</html>
Output

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque laudantium nemo molestiae odit voluptas maxime aliquid recusandae esse excepturi inventore tenetur, similique quisquam provident repellendus ea explicabo voluptatem neque a, repudiandae, deserunt hic id blanditiis corporis?

In the CSS styles, we have defined a selector p which selects the <p> element in the HTML document. The selector applies the text-align: justify; property to justify the text content of the <p> element, and the text-justify: inter-word; property to set the justification method to inter-word, which adjusts the spaces between words to achieve the justified effect.

In the HTML body, we have a single <p> element containing some text content. The CSS selector p applies the defined styles to the <p> element, which justifies its text content and adjusts the spaces between words to achieve the inter-word justification effect.

Therefore, the output of this code would be a paragraph with justified text content where the spaces between words are adjusted to achieve the inter-word justification effect.

Resize the window continuously to see the effect of an increase or decrease in equal white spaces between words.

CSS text-justify syntax

The syntax of the text-justify property in CSS is:

text-justify: x;

The value of x should be any of the following:

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!