CSS | text-justify Property

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:
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:
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:
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:
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
CSS-Properties
Picked
Technical Scripter 2018
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.