CSS | text-justify Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:

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

    Syntax:

    text-justify: auto;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:

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

  • Google Chrome
  • Internet Explorer 11.0
  • Firefox 55.0
  • Safari 10.0.3
  • Opera


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.