JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

  <li class="type1"><span>Some text in LI 1</span></li>
  <li class="type2"><span>Some more text in LI 2</span></li>
  <li class="type3"><span>A long string of text in LI3</span></li>
  <li class="type4"><span>A much longer string of text in LI4</span></li>

</ul>

<br/><br/><br/><br/>
<p id="result"></p>

CSS

.type1{
  border: 1px solid black;
  width: 130px;
  height:30px;
  margin-bottom:5px;
}

.type2{
  border: 1px dotted red;
  width: 50px;
  height:25px;
  margin-bottom:45px;
}

.type3{
  border: 1px dashed blue;
  width: 200px;
  height:40px;
  margin-bottom:5px;
}

.type4{
  border: 1px dashed green;
  width: 100px;
  height:10px;
  margin-bottom:5px;
}

JavaScript

function isOverflowing(element) {

  // 1. Main Part for overflow check
  if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    return true;
   }  
  
  // 2. Partially invisible items
  var invisibleItems = [];
  for(var i=0; i<element.childElementCount; i++){
    if (element.children[i].offsetTop + element.children[i].offsetHeight >
        element.offsetTop + element.offsetHeight ||
        element.children[i].offsetLeft + element.children[i].offsetWidth >
        element.offsetLeft + element.offsetWidth ){

          invisibleItems.push(element.children[i]);
      }

  }
  
  if (invisibleItems.length) {
  	return true;
  }
  // Otherwise, neither Part 1 nor 2, return FALSE
  return false;
}

$('#result').html('#1? ' + isOverflowing($('li:eq(0)')) + 
       '#2? ' + isOverflowing($('li:eq(1)')) + 
       '#3? ' + isOverflowing($('li:eq(2)')) + 
       '#4? ' + isOverflowing($('li:eq(3)')) 
);