The text-justify property sets the text justification method.
Justification means that text is spread out to fill the available space.
It does this by spacing words or characters.
This property is only relevant when text-align:justified is set.
Text with a text-justify:inter-word setting.
The words are spaced so that each line appears filled left to right.
<style>
.inter-word {
width: 250px;
padding: 15px;
border: 2px solid lightblue;
text-align: justify;
text-justify: inter-word;
}
</style>
<div class="inter-word">
Vincent van Gogh is one of the most well-known
post-impressionist painters, for whom color was
the chief symbol of expression. He was born in
Groot-Zundert, the Netherlands on March 30, 1853.
</div>
text-justify: auto | inter-word |
none | initial | inherit;
| Value | Description |
|---|---|
| none | No justification methods |
| auto | Browser sets the optimal justification algorithm |
| inter-word | Increases or decreases space between words |
| trim | Trimming is preferred over expansion. |
| initial | Sets the value to its default value value. |
| inherit | Inherits the value from its parent element. |
Note: There are some other justification functions, specifically for arabic and asian languages,
such as inter-character, inter-cluster, inter-ideagraph, and kashida.
Click the buttons to see the different text-justify values.
<style>
.justify-example {
width: 250px;
padding: 15px;
border: 2px solid orangered;
text-align: justify;
text-justify: inter-word;
}
</style>
<div class="justify-example">
Vincent van Gogh is one of the most well-known
post-impressionist painters, for whom color was
the chief symbol of expression. He was born in
Groot-Zundert, the Netherlands on March 30, 1853.
</div>
This table shows when text-justify support started for each browser.
 Chrome
|
Yes | |
 Firefox
|
55.0 | Aug 2017 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
Yes | |
 Safari
|
10.0.3 | Jan 2017 |
