JSFiddle - React, Tailwind, and code Playground

by Alon Rotem

HTML

<div id="listContainer" style="width: 200px; height: 90px; overflow: hidden;">
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 3</li>
    <li>Item 3</li>
    <!-- More items -->
  </ul>
</div>

CSS

#listContainer {
  background-color: yellow;
}

JavaScript

/*
const listContainer = document.getElementById('listContainer');
const list = document.getElementById('list');

while (listContainer.scrollHeight > listContainer.offsetHeight) {
  let items = list.getElementsByTagName('li');
  let lastItem = items[items.length - 1];
  
  if (lastItem.innerText !== '...') {
    lastItem.remove();
    let ellipsis = document.createElement('li');
    ellipsis.innerText = '...';
    list.appendChild(ellipsis);
  } else {
    lastItem.previousSibling.remove();
  }
}
*/
var listContainer = document.getElementById('listContainer');
var list = document.getElementById('list');

while (listContainer.scrollHeight > listContainer.offsetHeight) {
  var items = list.getElementsByTagName('li');
  var lastItem = items[items.length - 1];
  
  if (lastItem.innerText !== '...') {
    lastItem.remove();
    var ellipsis = document.createElement('li');
    ellipsis.innerText = '...';
    list.appendChild(ellipsis);
  } else {
    lastItem.previousSibling.remove();
  }
}