TL;DR: I built a CSS-only (~ish) solution for multiline truncated text with read more button.

The other day, truncated text came up during a discussion in the office, and I since wondered if CSS has come far enough to be able to do truncated text right, that is, supporting the following:

  • Multiple lines
  • “Show more” button that expands text when clicked

text-overflow: ellipsis does not support multiple lines, but I remembered the line-clamp property that can be used to achieve multiline truncated text. And luckily, CSS Tricks has a nice working demo, plus browser support is fairly decent now. Cool!

What about that expand button though?

Creating the “show more” button requires some outside-the-box CSS hackery. I couldn’t use a