text-align-last

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

• left aligns the last line of text to the left of the container.
• rightaligns the last line of text to the right of the container.
• center centers the last line of text within the container.
• justify justifies 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.
• start aligns the text to the “start” of the line based on the direction of the text — left for LTR languages, right for RTL languages.
• end aligns the last line to the “end” of the line based on the direction of the text — right for LTR languages, left for RTL languages.
• auto the default. Aligns the last line of text to match the element’s text-align property, if it is set. If it is not set, auto aligns the text to the start.
• inherit applies the text-align-last property 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

• text-align
• text-indent

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