Open In App

CSS text-justify Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The text-justify property in CSS is used to set the text-align to justify. It spreads the words into a 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. 
  • inter-word: The text is justified by increasing or decreasing the spacing between individual words in a text. 
  • inter-character: The text is justified by increasing or decreasing the spacing between individual characters in a text. 
  • none: It is used to disable the justification methods used in the text. 

Example: In this example, we are using text-justify: auto property.

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: 

Example: In this example, we are using text-justify: inter-word property.

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: 

Example: In this example, we are using text-justify: inter-character property.

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: 

Example: In this example, we are using text-justify: auto property.

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


Last Updated : 20 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads