The text-justify property in CSS controls how text is spaced when text-align: justify is used. It adjusts the space between words or characters to make the text fill the full width of the line. Common options include auto, inter-word, inter-character, and none for better text formatting.
Syntax
text-justify: auto | inter-word | inter-character | none:initial | inherit;Property Values
The text-justify property values are listed below:
| Value | Description |
|---|---|
| auto | Allows the browser to determine the best justification property for the given text. |
| inter-word | Justifies text by adjusting the spacing between individual words in the text. |
| inter-character | Justifies text by adjusting the spacing between individual characters in the text. |
| none | Disables any justification methods used in the text. |
Example of CSS text-justify Property
Here are a few examples of how the text-justify property is used to adjust text spacing:
Example 1: Using CSS auto property
In this example, we demonstrate the text-justify: auto; property, allowing the browser to determine the best text justification method for the text content within the specified container.
<!DOCTYPE html>
<html>
<head>
<title>text-justify property</title>
<style>
#main {
border: 1px solid green;
padding-bottom: 6px;
}
#text-justify-container {
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="text-justify-container">
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 2: Using CSS inter-word property
In this example we are use the text-justify: inter-word; property, which justifies text by adjusting spacing between individual words in the specified container.
<!DOCTYPE html>
<html>
<head>
<title>text-justify property</title>
<style>
#main {
border: 1px solid green;
padding-bottom: 6px;
}
#text-justify-container {
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="text-justify-container">
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 3: Using CSS inter-character property
In this example we are using text-justify: inter-character; property, which justifies text by adjusting spacing between individual characters within the specified container.
<!DOCTYPE html>
<html>
<head>
<title>text-justify property</title>
<style>
#main {
border: 1px solid green;
padding-bottom: 6px;
}
#text-justify-container {
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="text-justify-container">
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 4: Using CSS none property
This example disables text justification methods using text-justify: none;, keeping text aligned left despite justification settings applied in the .none class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Justify None </title>
<style>
.text-justify-container {
text-align: justify;
text-justify: none;
}
</style>
</head>
<body>
<h2>Text Justify None</h2>
<p class="text-justify-container">
This is an example of text justification
with the none value. The justification
methods are disabled.
</p>
</body>
</html>
Output:
Supported Browsers
The browser supported by text-justify property are listed below:
- Google Chrome 5.0
- Edge 12
- Mozilla 4.0
- Safari 5.0
- Opera 11.1