Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
text-justify Property in CSS
The CSS text-justify property controls how justified text is aligned when text-align is set to justify. It determines the method used to distribute space between words or characters to achieve full justification.
Syntax
selector {
text-justify: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Browser determines the best justification method |
inter-word |
Adjusts spacing between words |
inter-character |
Adjusts spacing between characters |
none |
Disables justification |
Example 1: Inter-word Justification
The following example uses inter-word to justify text by adjusting space between words −
<!DOCTYPE html>
<html>
<head>
<style>
.inter-word-example {
width: 300px;
padding: 20px;
text-align: justify;
text-justify: inter-word;
background-color: #f0f0f0;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="inter-word-example">
This is a sample paragraph that demonstrates inter-word justification. Notice how the spacing between words is adjusted to make each line fill the entire width of the container.
</div>
</body>
</html>
A gray bordered box containing justified text where spacing between words is adjusted to align both left and right edges evenly.
Example 2: Inter-character Justification
This example uses inter-character to justify text by adjusting space between individual characters −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
margin: 20px;
background-color: #ffe4b5;
padding: 15px;
}
.inter-char {
text-align: justify;
text-justify: inter-character;
background-color: #ffebcd;
padding: 10px;
margin-bottom: 10px;
}
.normal {
text-align: justify;
background-color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<p class="inter-char">Inter-character justification: This text uses character spacing to achieve full justification across the entire width.</p>
<p class="normal">Normal justification: This text uses the default justification method for comparison purposes.</p>
</div>
</body>
</html>
Two paragraphs in a peach-colored container. The first paragraph shows inter-character spacing with slightly wider character gaps, while the second shows normal word spacing for comparison.
Conclusion
The text-justify property provides fine control over text justification methods. Use inter-word for standard justification and inter-character for languages that benefit from character-level spacing adjustments.
Updated on: 2026-03-15T13:42:30+05:30
761 Views
Advertisements