Updated June 9, 2023
Introduction to Justify Text in CSS
The following article provides an outline for Justify Text in CSS. The text-justify property specifies the justification of the text when the text-align property is set to “justify” value. Text-justify property is always applied with the text-align property. This text-justify property spreads the words into the complete line with equal spaces. This text-justify property is only applicable with text only. This property contains four important values auto, inter-word, inter-character, and none.
Real-Time Scenario: It is not correctly aligned while displaying paragraph text on the web page. Suppose we use the text-justify property along with the text-align property to align the text in a proper format. Align the text with equal white spaces.
How does text-justify work in CSS?
Text-justify property is working based on the value given to the property. This property contains four core values.
1. Auto
This auto value automatically allows the browser to apply which text style is suitable.
Syntax:
Selector
{
Text-justify: auto;
}2. Inter-word
It is justified by decreasing or increasing the space between individual words in the text.
Syntax:
Selector
{
Text-justify: inter-word;
}3. Inter-character
It is justified by decreasing or increasing the space between individual characters in the text.
Syntax:
Selector
{
Text-justify: inter-character;
}4. None
This none value makes the text unmodifiable because it has no text-justify value.
Syntax:
Selector
{
Text-justify: none;
}Examples
Given below are the examples mentioned:
Example #1
Text-justify: auto Example.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Text-justify Property</title>
<style>
.textMain {
padding-bottom: 10px;
border:4px dotted red;
}
.textPara {
text-align:justify;
text-justify:auto;
color: green;
font-size: 20px;
}
h2{
text-align:center;
color: blue;
}
</style>
</head>
<body>
<div class = "textMain">
<h2>Introduction to text-justify: auto demo</h2>
<div class = "textPara">The text-justify property specifies the justification of the text when text-align property is setting to "justify" value. Text-justify property is always applied with text-align property. This text-justify property spreads the words into the complete line with equal spaces. This text-justify property only applicable with text only. This property contains 4 important values auto, inter-word, inter-character and none.
Real Time Scenario: While we are displaying paragraphs text in web page, it is not correctly aligned. If we use text-justify property along with text-align property to align the text in proper format.
</div>
</div>
</body>
</html>Output:
Example #2
Text-justify: inter-word Example.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Text-justify Property</title>
<style>
.textMain {
padding-bottom: 10px;
border:5px ridge gray;
}
.textPara {
text-align:justify;
text-justify:inter-word;
color: blue;
font-size: 22px;
}
h2{
text-align:center;
color: red;
}
</style>
</head>
<body>
<div class = "textMain">
<h2>Introduction to text-justify: inter-word demo</h2>
<div class = "textPara">The text-justify property specifies the justification of the text when text-align property is setting to "justify" value. Text-justify property is always applied with text-align property. This text-justify property spreads the words into the complete line with equal spaces. This text-justify property only applicable with text only. This property contains 4 important values auto, inter-word, inter-character and none.
Real Time Scenario: While we are displaying paragraphs text in web page, it is not correctly aligned. If we use text-justify property along with text-align property to align the text in proper format.
</div>
</div>
</body>
</html>Output:
Example #3
Text-justify: inter-character Example.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Text-justify Property</title>
<style>
.textMain {
padding-bottom: 10px;
border:5px dashed red;
}
.textPara {
text-align:justify;
text-justify:inter-character;
color: fuchsia;
font-size: 21px;
}
h2{
text-align:center;
color: navy;
}
</style>
</head>
<body>
<div class = "textMain">
<h2>Introduction to text-justify: inter-character demo</h2>
<div class = "textPara">The text-justify property specifies the justification of the text when text-align property is setting to "justify" value. Text-justify property is always applied with text-align property. This text-justify property spreads the words into the complete line with equal spaces. This text-justify property only applicable with text only. This property contains 4 important values auto, inter-word, inter-character and none.
Real Time Scenario: While we are displaying paragraphs text in web page, it is not correctly aligned. If we use text-justify property along with text-align property to align the text in proper format.
</div>
</div>
</body>
</html>Output:
Example #4
Text-justify: none Example.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Text-justify Property</title>
<style>
.textMain {
padding-bottom: 10px;
border:5px solid brown;
}
.textPara {
text-align:justify;
text-justify:none;
color: black;
font-size: 21px;
}
h2{
text-align:center;
color: orange;
}
</style>
</head>
<body>
<div class = "textMain">
<h2>Introduction to text-justify: none demo</h2>
<div class = "textPara">The text-justify property specifies the justification of the text when text-align property is setting to "justify" value. Text-justify property is always applied with text-align property. This text-justify property spreads the words into the complete line with equal spaces. This text-justify property only applicable with text only. This property contains 4 important values auto, inter-word, inter-character and none.
Real Time Scenario: While we are displaying paragraphs text in web page, it is not correctly aligned. If we use text-justify property along with text-align property to align the text in proper format.
</div>
</div>
</body>
</html>Output:
Conclusion
Text-justify is used to align with equal spaces and widths. This property allows four values: auto, inter-word, inter-character, and none. This text-justify property always allows text-align property.
Recommended Articles
We hope that this EDUCBA information on “Justify Text in CSS” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
