Skip to content
Related Articles

Related Articles

CSS | text-justify Property

Improve Article
Save Article
  • Last Updated : 04 Aug, 2022
Improve Article
Save Article

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: 

html




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

html




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

html




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

html




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

  • Edge 12.0
  • Internet Explorer 11.0
  • Firefox 55.0

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!