How to align the text of the last paragraph line (#tilPost)

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

Initially, 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 researching the topic, I discovered that the property can be helpful with text-align: justify. As discussed in a Tailwind issue, you can't style paragraphs with justified text and control the alignment of the last line without an additional CSS property.

With a combination of text-align and text-align-last this layout 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!

[Interactive component: visit the article to see it...]

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	Nö	Nein	5.0	47

And even though a WebKit ticket claims there's a prefixed property -webkit-text-align-last, it doesn't seem to work in Safari 15.4.

If the only use case of this property is in combination with text-align: justify, I'm very skeptical about it. Web performance and accessibility are close to my heart, so I haven't implemented justified text for ages.

Nevertheless, it's good to know that text-align-last exists. I guess... 🤷‍♂️