text-align-last
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
leftif direction is left-to-right andrightif direction is right-to-left. - end
-
The same as
rightif direction is left-to-right andleftif 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-justifyproperty.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-alignunlesstext-alignis set tojustify. In this case, content is justified iftext-justifyisdistributeand 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!