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:
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
Please Login to comment...