This property describes how the last line of a block or a line right before a forced line break (example: with <br/>
, or the line break forced by the end of a <p>
tag) is aligned.
If a line is also the first line of the block or the first line after a forced line break, then, unless text-align
assigns an explicit first line alignment (via start end
), text-align-last
takes precedence over text-align
.
If the last line is composed of only one word, then justifying that line with text-align-last: justify;
will have no effect.
If auto
is specified, content on the affected line is aligned per text-align
unless text-align
is set to justify
. In this case, content is justified if text-justify
is distribute
and start-aligned otherwise. All other values have the same meanings as in text-align
.
Official Syntax
-
Syntax:
text-align-last: auto | start | end | left | right | center | justify
- Initial: auto
- Applies To: block containers
- Animatable: no
Values
- start
-
The same as
left
if direction is left-to-right andright
if direction is right-to-left. - end
-
The same as
right
if direction is left-to-right andleft
if direction is right-to-left. - left
- Inline-level content is aligned to the left edge of the line box.
- right
- Inline-level content is aligned to the right edge of the line box.
- center
- The inline contents are centered (horizontally) within the line box.
- justify
-
Text is justified according to the method specified by the
text-justify
property.The browser adjusts the spacing between words so that the inline content exactly fills the entire line from the left edge of the element to its right edge.
It usually takes the remaining space between the ends of a line’s contents and the edges of its container, and distributes that space throughout its contents so that the contents exactly fill the line box.
- auto
-
Content is aligned per
text-align
unlesstext-align
is set tojustify
. In this case, content is justified iftext-justify
isdistribute
and start-aligned otherwise. All other values have the same meanings as intext-align
.
Examples
The following example will justify the last line of all paragraphs in the page which normally wouldn’t be justified even if text-align: justify
is applied.
p { text-align: justify; text-align-last: justify; }
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The text-align-last
property is currently only supported in Firefox 12+ and it needs the -moz-
prefix.
Notes
The text-align-last
property is also supported in IE starting version 5.5, but it does not work in IE8!