CSS | text-justify Property

Last Updated : 09 Aug, 2019

The text-justify property in CSS is used to set the text-align to justify. It spreads the words into the complete line.

Syntax:

text-justify: auto|inter-word|inter-character|none:initial|inherit;

Property Values: The text-justify property values are listed below:

auto: It is used to allow the browser to determine which justification property would be better for the given text.

Syntax:

text-justify: auto;

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>text-justify property</title>  
        <style>  
            #main {  
                border:1px solid green; 
                padding-bottom: 6px; 
            }  
            #geeks {  
                text-align:justify; 
                text-justify:auto; 
            }  
            h1, h2, h3 { 
                text-align:center; 
            } 
        </style>  
    </head>  
    <body>  
        <h1 style = "color:green"> 
            GeeksforGeeks 
        </h1>  
          
        <div id = "main">  
          
            <h3>text-justify: auto;</h3>  
              
            <!-- text-justify property used here -->
            <div id = "geeks"> 
             HTML stands for Hyper Text Markup Language.  
             It is used to design web pages using a markup 
             language. HTML is the combination of Hypertext 
             and Markup language. 
        </div>  
        </div> 
    </body>  
</html>                     

Output:

inter-word: The text is justified by increasing or decreasing the spacing between individual words in a text.

Syntax:

text-justify: inter-word;

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>text-justify property</title>  
        <style>  
            #main {  
                border:1px solid green; 
                padding-bottom: 6px; 
            }  
            #geeks {  
                text-align:justify; 
                text-justify:inter-word; 
            }  
            h1, h2, h3 { 
                text-align:center; 
            } 
        </style>  
    </head>  
    <body>  
        <h1 style = "color:green"> 
            GeeksforGeeks 
        </h1>  
          
        <div id = "main">  
          
            <h3>text-justify: inter-word;</h3>  
              
            <!-- text-justify property used here -->
            <div id = "geeks"> 
             HTML stands for Hyper Text Markup Language.  
             It is used to design web pages using a markup 
             language. HTML is the combination of Hypertext 
             and Markup language. 
        </div>  
        </div> 
    </body>  
</html>                     

Output:

inter-character: The text is justified by increasing or decreasing the spacing between individual characters in a text.

Syntax:

text-justify: inter-character;

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>text-justify property</title>  
        <style>  
            #main {  
                border:1px solid green; 
                padding-bottom: 6px; 
            }  
            #geeks {  
                text-align:justify; 
                text-justify:inter-character; 
            }  
            h1, h2, h3 { 
                text-align:center; 
            } 
        </style>  
    </head>  
    <body>  
        <h1 style = "color:green"> 
            GeeksforGeeks 
        </h1>  
          
        <div id = "main">  
          
            <h3>text-justify: inter-character;</h3>  
              
            <!-- text-justify property used here -->
            <div id = "geeks"> 
             HTML stands for Hyper Text Markup Language.  
             It is used to design web pages using a markup 
             language. HTML is the combination of Hypertext 
             and Markup language. 
        </div>  
        </div> 
    </body>  
</html>                     

Output:

none: It is used to disable the justification methods used in the text.

Syntax:

text-justify: auto;

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>text-justify property</title>  
        <style>  
            #main {  
                border:1px solid green; 
                padding-bottom: 6px; 
            }  
            #geeks {  
                text-align:justify; 
                text-justify:auto; 
            }  
            h1, h2, h3 { 
                text-align:center; 
            } 
        </style>  
    </head>  
    <body>  
        <h1 style = "color:green"> 
            GeeksforGeeks 
        </h1>  
          
        <div id = "main">  
          
            <h3>text-justify: auto;</h3>  
              
            <!-- text-justify property used here -->
            <div id = "geeks"> 
             HTML stands for Hyper Text Markup Language.  
             It is used to design web pages using a markup 
             language. HTML is the combination of Hypertext 
             and Markup language. 
        </div>  
        </div> 
    </body>  
</html>                     

Output:

Supported Browsers: The browser supported by text-justify property are listed below:

Google Chrome
Internet Explorer 11.0
Firefox 55.0
Opera
Safari 10.0.3

My Personal Notes

Related Articles