Transitions not working with -webkit-line-clamp (CSS)

Artur Müller Romanov 0
Viewed 25

I'm using this css to hide text in a paragraph that exceeds a line length of 5:

.paragraph {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

enter image description here

Now I want to show the full text on mouseover, which in my framework (vue) is handled by unbinding the paragraph class from the element. Unfortunately this doesn't seem to work with transitions, making the element expand instantly, which does not look very elegant. Is there any way I can make the transition work?

webkit css-transitions vue.js javascript css
0 Answers
Related