CSS text-justify Property
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; } #Beginner { text-align: justify; text-justify: auto; } h1, h2, h3 { text-align: center; } </ style > </ head > < body > < h1 style = "color:green" > w3wiki </ h1 > < div id = "main" > < h3 >text-justify: auto;</ h3 > <!-- text-justify property used here --> < div id = "Beginner" > 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; } #Beginner { text-align: justify; text-justify: inter-word; } h1, h2, h3 { text-align: center; } </ style > </ head > < body > < h1 style = "color:green" > w3wiki </ h1 > < div id = "main" > < h3 >text-justify: inter-word;</ h3 > <!-- text-justify property used here --> < div id = "Beginner" > 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; } #Beginner { text-align: justify; text-justify: inter-character; } h1, h2, h3 { text-align: center; } </ style > </ head > < body > < h1 style = "color:green" > w3wiki </ h1 > < div id = "main" > < h3 >text-justify: inter-character;</ h3 > <!-- text-justify property used here --> < div id = "Beginner" > 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; } #Beginner { text-align: justify; text-justify: auto; } h1, h2, h3 { text-align: center; } </ style > </ head > < body > < h1 style = "color:green" > w3wiki </ h1 > < div id = "main" > < h3 >text-justify: auto;</ h3 > <!-- text-justify property used here --> < div id = "Beginner" > 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
Contact Us