Toggle read more/less with line-clamp and keyframes

This is a small amount of code, that took me hours to finish.

Creating a text snippet like the screenshot above, that will use ellipsis and a line-clamp set to 3 lines when closed, and fold out to full text smoothly, without using javascript can be tricky.

The tricky part here, is to go from the open view, back to the closed view. Why is that? Because the line-clamp will jump straight from being initial to 3 in this case.

With keyframes, we can set a delay, that is telling when the line-clamp is back to being 3 lines before showing the magical 3 dots, following the height of the box.

.box {
  width: 320px;
  padding: 12px 32px 64px;
  max-height: 162px;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0,1,0,1);
}
.box.open {
  max-height: 100rem;
  transition: max-height 0.3s cubic-bezier(0.9, 0, 0.8, 0.2);
}

First we make a “box” to each snippet. The max-height and overflow is adjusted to showing 3 lines of text. When you press a read-more button, it adds the class “open” and the max-height is now 100rem. I recommend using 100rem instead of 10000px, because a large difference between two numbers will have a bad visual effect. If you know already, that the text will never get more than 400px high for example, you…