The text-align-last property aligns the last line of a block of text.
Options include left, center, right, justify, and others.
Not all browsers support this property.
The last line is centered with a text-align-last:center setting.
<style>
.text-align-last {
max-width: 400px;
padding: 15px;
text-align: justify; /* For Edge */
text-align-last: center;
border: 2px solid lightblue;
}
</style>
<div class="text-align-last">
The most comprehensive primary source
on Van Gogh is the correspondence between
he and his younger brother, Theo. Their
lifelong friendship, and most of what is
known of Vincent's thoughts and theories
of art, are recorded in the hundreds of
letters they exchanged from 1872 until 1890.
Theo van Gogh was an art dealer and provided
his brother with financial and emotional support
as well as access to influential people on the
contemporary art scene.
</div>
text-align-last: auto | left | right | center |
justify | start | end |
initial | inherit;
| Value | Description |
|---|---|
| auto | Default. The last line will be justified and left-aligned. |
| left | Left align last line text |
| right | Right align last line text |
| center | Center align last line text |
| justify | Justifies last line text |
| start | Last line is aligned at the beginning of the line |
| end | Last line is aligned at the end of the line |
| initial | Sets the value to its default value |
| inherit | Inherits the vale from its parent element. |
Click the buttons to see the different text-align values.
<style>
.text-align-last-example {
max-width: 400px;
padding: 15px;
text-align: justify; /* For Edge */
text-align-last: right;
border: 2px solid lightsalmon;
}
</style>
<div class="text-align-last-example">
The most comprehensive primary source
on Van Gogh is the correspondence between
he and his younger brother, Theo. Their
lifelong friendship, and most of what is
known of Vincent's thoughts and theories
of art, are recorded in the hundreds of
letters they exchanged from 1872 until 1890.
Theo van Gogh was an art dealer and provided
his brother with financial and emotional support
as well as access to influential people on the
contemporary art scene.
</div>
By default, text in a <select> element is left aligned.
In this example text-align-last has changed the text alignment.
<style>
.centered {
text-align: center; /* For Edge */
text-align-last: center;
width: 200px;
}
</style>
<div>
Choose color
<select class="centered">
<option>Blue</option>
<option>Green</option>
<option>Red</option>
<option>Yellow</option>
</select>
</div>
This table shows when text-align-last support started for each browser.
 Chrome
|
47.0 | Dec 2015 |
 Firefox
|
49.0 | Sep 2016 |
 IE/Edge
|
5.5 | Jul 2000 |
 Opera
|
34.0 | Dec 2015 |
 Safari
|
Not supported | |
