JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<div>
    <h1 class="hideIfLong">One Liner</h1>
    <h1 class="hideIfLong">A very long, tedious headline with way too many words.</h1>
</div>

CSS

div {width: 500px; background: red; height: 300px; padding: 20px; -moz-box-sizing: content-box;}

JavaScript

$.fn.isMoreThanOneLine = function() {
    var $clone = $(this).clone().css('visibility', 'hidden').appendTo($(this).parent());
    var elHeight = $clone.height();
    $clone.remove();
    return elHeight > parseFloat($clone.css('line-height'));
}

$('.hideIfLong').each(function(i, el){
    if($(el).isMoreThanOneLine()) $(el).hide();
});