JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<ul>
<li><a>Vocabulary Bowl.</a></li>
<li><a>Bowl.</a></li>
<li><a>Today's Leaders.</a></li>
<li><a>Weekly LeadersToday's.</a></li>
<li><a>Bowl.</a></li>
<li><a>Monthly Leaders.</a></li>
<li><a>Bowl.</a></li>
<li><a>Vocabulary Bowl Today's Leaders.</a></li>
<li><a>Bowl Leaders.</a></li>
<li><a>Today's Leaders Today's Leaders Today's Leaders.</a></li>
<li><a>Weekly Leaders.</a></li>
<li><a>Monthly.</a></li>
<li><a>Vocabulary Bowl.</a></li>
<li><a>Bowl Leaders.</a></li>
<li><a>Today's Leaders.</a></li>
<li><a>Weekly Leaders.</a></li>
<li><a>Monthly Leaders.</a></li>
<li><a>Vocabulary Bowl.</a></li>
<li><a>Bowl Leaders.</a></li>
<li><a>Today's Leaders.</a></li>
<li><a>Weekly Leaders.</a></li>
<li><a>Monthly Leaders.</a></li>
</ul>
CSS
.wrapper{
background: #eee none repeat scroll 0 0;
border: 1px solid #ddd;
height: 20px;
overflow: hidden;
padding: 5px;
width: 600px;
float: left;
}
ul{
float: left;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 0 5px;
list-style-type: none;
}
li.visible {
color:#f00;
}
li.visible-whole {
outline:1px solid #0f0;
}
JavaScript
$(function(){
var wrapper = document.querySelector('.wrapper'),
wrapperBox = wrapper.getBoundingClientRect();
var inBoxPartial = $("li").filter( function(idx, li){
var liBox = li.getBoundingClientRect();
return liBox.top < wrapperBox.bottom && liBox.left < wrapperBox.right;
}).addClass('visible');
var inBoxTotal = $("li").filter( function(idx, li){
var liBox = li.getBoundingClientRect();
return liBox.bottom < wrapperBox.bottom && liBox.right < wrapperBox.right;
}).addClass('visible-whole');
console.log( inBoxPartial, inBoxTotal );
});