JSFiddle - React, Tailwind, and code Playground

by metalim

HTML

<div id="container">
</div>

CSS

.overflow {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JavaScript

// generate HTML
const container = document.querySelector('#container')
for (let i=1; i<=20; i++) {
	const span = document.createElement('span')
  span.className = 'overflow'
  span.innerHTML = Array(i).fill(0).map((e,j)=>j).join('+')
	container.appendChild(span)
}

// add tooltips
document.querySelectorAll('.overflow').forEach(span => {
	if (span.scrollWidth > span.clientWidth) {
  	span.title = span.innerText
  }
})