Display text only if text is more than x lines

Question

I wish to output some text to a table cell. If this text is more than x lines I trim it and add a "see more" button.

Up to here everything is great, the problem is that the "see more" button is there also when I have a y<x lines of text.

Is there a way to check whether the text is more\\less than x lines?

Answer 1

you can have the line number based on the height of the element, if one line have 10px height 10 lines have 100px height Vanilla js:

let height = document.getElementById('IdElement').offsetHeight;

Jquery library:

let height = $('#IdElement').height();

with this variable you can do the logic to find out the amount of lines

to directly have the line number you need to put each line in a tag be it p , span , whatever Perhaps the easiest is actually to take this with the height of the element