text-align-last lets you control the alignment of the last (or only) line of text right before a forced line break — for example the end of a paragraph or the line right before a <br> tag.
.intro-graph {
text-align-last: center;
}At the time of this writing, only Mozilla browsers and Internet Explorer support text-align-last (with vendor prefixes), and each has a slightly different implementation. The property was supposed to start working in Chrome 35, but as of Chrome 40 it still requires the experimental web platforms flag. More detail on browser implementations in the Points of Interest.
Values
leftaligns the last line of text to the left of the container.rightaligns the last line of text to the right of the container.centercenters the last line of text within the container.justifyjustifies the last line of text so it spans the full width of the container, inserting space between words if needed to increase the line length.startaligns the text to the “start” of the line based on thedirectionof the text — left for LTR languages, right for RTL languages.endaligns the last line to the “end” of the line based on thedirectionof the text — right for LTR languages, left for RTL languages.autothe default. Aligns the last line of text to match the element’stext-alignproperty, if it is set. If it is not set,autoaligns the text to the start.inheritapplies thetext-align-lastproperty of the parent element.
Demo
This demo shows the different text-align-last values in action. Note: Internet Explorer does not support the start or end values.
See the Pen text-align-last by CSS-Tricks (@css-tricks) on CodePen.
Points of Interest
In Internet Explorer, text-align-last only works when the text-align of the rest of the text in the selected element is set to justify. Also, IE does not recognize the start or end value.
In Mozilla browsers, text-align-last will work on the last line before a forced line break even if there is no alignment specified for the rest of the text in the element.
It’s also worth knowing that text-align-last sets the alignment for all last lines within the selected element, not just the absolute last line of text. So, for example, if you have a div with five paragraphs in it, your text-align-last declaration will apply to the last line of each of the paragraphs.
If you want to use text-align-last on only the very last line in the container, you may be able to use :last-child or :last-of-type. Your CSS would look something like this:
#center-only-last p:last-child {
-ms-text-align-last: center;
-moz-text-align-last: center;
text-align-last: center;
}In the demo below, the left side shows text-align-last: center; applied to a div with multiple paragraphs inside it. Notice that the last line of each paragraph is centered. The right side shows text-align-last: center; applied only to the last paragraph inside the div using :last-child.
See the Pen text-align-last by CSS-Tricks (@css-tricks) on CodePen.
Related
More Information
- text-align-last in the CSS Text Module Level 3 (W3C)
- text-align-last at MDN
- text-align-last at MSDN
- text-align-last on Adobe’s web platform team blog
- Webkit Bug 76173, regarding Chrome’s implementation of
text-align-last
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 35+ with experimental flags | Nope | 34+ (prefixed) | Nope | 5.5+ (prefixed) | Nope | Nope |
If there is only one line of text it is also considered “last,” which might not be what you’d like.
If element is displayed as a flex box, then if the first line is also the last,
text-align-lastseems not to be applied.From the last codepen of this article , test this:
#center h2 {display:flex;}or the forked pen: http://codepen.io/gc-nomade/pen/pemOJR