JSFiddle - React, Tailwind, and code Playground

HTML

<div class="newslist">
    <ul>
        <li><h2>News Item 1</h2>
            <p>tease tease tease tease tease</p>
        </li>
        <li><h2>News Item 2</h2>
            <p>tease tease tease tease tease</p>
        </li>
        <li><h2>News Item 3</h2>
            <p>tease tease tease tease tease</p>
        </li>
        <li><h2>News Item 4</h2>
            <p>tease tease tease tease tease</p>
        </li>
        <li><h2>News Item 5</h2>
            <p>tease tease tease tease tease</p>
        </li>
    </ul>
</div>

CSS

.newslist{
 height: 156px;
    border:1px solid green;
}
.newslist ul{
    list-style:none;
    margin:0;
    padding:0;
}
.newslist li{
    margin:0;
    padding:5px;
    border:1px solid gray;
}

JavaScript

$('.newslist').each(function(){
    var $this = $(this),
        totalHeight = 0,
        tmp_height = $this.height();
    $this.find('li').each(function(){
        totalHeight += $(this).outerHeight();
        if (totalHeight > tmp_height) {
            $(this).hide();
        }
    });
});