JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<ul class="list">
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
<li>text 4</li>
<li>text 5</li>
<li>text 6</li>
<li>text 7</li>
</ul>
CSS
.list {
overflow: hidden;
white-space: nowrap;
width: 140px;
}
.list li {
display: inline-block;
}
JavaScript
$(document).ready(function(){
var container = $('.list'),
elements = $('li', container),
checkOffset = container.width() + container.offset().left;
elements.each(function(){
if ($(this).offset().left > checkOffset) $(this).addClass('hidden');
});
});