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

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
35+ with experimental flags Nope 34+ (prefixed) Nope 5.5+ (prefixed) Nope Nope

Comments

  1. User Avatar
    Dragonymous
    Permalink to comment#

    If there is only one line of text it is also considered “last,” which might not be what you’d like.

    • User Avatar
      gcyrillus
      Permalink to comment#

      If element is displayed as a flex box, then if the first line is also the last, text-align-last seems 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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag