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