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>
<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>
<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>
<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>
<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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
20 Jun, 2023
Like Article
Save Article