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 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 4 important values auto, inter-word, inter-character, and none.
Real Time Scenario: While we are displaying paragraphs text on the web page, it is not correctly aligned. If we use text-justify property along with 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 4 core values.
1. Auto
This is an auto value that 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 to unmodifiable because it does not have any 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 width. This property allows 4 values like auto, inter-word, inter-character and none. This text-justify property always allows text-align property.
Recommended Articles
This is a guide to Justify Text in CSS. Here we discuss the introduction, how does text-justify work in CSS? and examples respectively. You may also have a look at the following articles to learn more –
