Button “Readmore” appears each time the text is larger than 2 rows length

Question

DEMO: https://jsfiddle.net/qo6ycfpf/

In the above code, I collapsed the text so that it is more compact, but the text isn't always the same length. In the demo, second text is short, but the button is appearing "Readmore".

So I want a jQuery/script or a workaround for each time the text height is greater than 50 pixels (or 2 rows), which the "Readmore" button appears.

Thanks everyone

Answer 1

Iterate each text content div using $.each() to find it's height and then hide it's corresponding label .

Code snippets:

$("div.text-cmt").each(function () {
    if ($(this).height() < "50") {
        $(this).prev("label").hide();
    }
});

FIDDLE DEMO