How to align the text of the last paragraph line

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?

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.

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;
}

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!

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

MDN Compat Data (source)

Browser support info for text-align-last

47	47	12	49	49	16	16	5.0	47

The support looks pretty green for 2024!

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.