Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
3min
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. 😲

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?

A use case for text-align-last

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 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
4747124949NonNei5.047

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.

Webkit developer tools showing that -webkist-text-align-last is not supported

Conclusion

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... πŸ€·β€β™‚οΈ

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

Related Topics

Related Articles