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?

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

CSS text-justify Syntax

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

text-justify: x;

The value of x should be any of the following:

inter-word - used to increase/decrease space between words
inter-character - used to increase/decrease space between characters
auto - used to allow browser to justify the text
none - used not to justify the text
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »