Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

Today I learned there's a CSS property to align the last line of a rendered paragraph – text-align-last. 😲

At first, I couldn't see the value of this property because the last paragraph line always follows the overall text-align property. If your text is left-aligned, the last line is left-aligned, too. The same applies to center and right.

So, what's the deal?

A use case for text-align-last

After a bit of research, I discovered that the property can be helpful with text-align: justify. As discussed in a Tailwind issue, you can't style justified paragraphs and control the alignment of the last line. For example, a layout like the one below is not possible without an additional CSS property.

A site with stacked paragraphs styled with text-align: justify showing that the last line should align left and right to follow the design preferences.

With a combination of text-align and text-align-last this design becomes possible.

p {
  text-align: justify;
}

p.left {
  text-align-last: left;
}

p.right {
  text-align-last: right;
}

Justifying text might look good to you and your designer, but be aware that irregular text spacing fails the WCAG success criterion 1.4.8.

It's cool that the property supports logical values like start and end. These values react to the reading direction. Suppose you build a multilingual site that includes right-to-left and left-to-right languages. Using start and end makes the last line alignment react to the text direction. Sweet!

Playground
Choose a text-align-last option
Choose a direction option
Preview

I'm a paragraph with text-align: justify;! 👋 Doggo ipsum shoob long water shoob h*ck smol fat boi, vvv wow very biscit. shibe heckin good boys and girls shoob.

text-align-last browser support

So, how's the text-align-last browser support?

MDN Compat Data (source)
Browser support info for text-align-last
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
474712494916165.047

The support looks pretty green for 2024!

Conclusion

I probably won't use text-align-last much, because, as mentioned, justified text isn't really accessible. But hey, it's good to know that text-align-last exists. I guess... 🤷‍♂️

Read more about text-align-last on MDN or the "CSS Text Module Level 4" spec.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 19 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles