JSFiddle - React, Tailwind, and code Playground

by diegof79

HTML

<div id="one" style="width: 100px" class="truncate">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div id="two" class="truncate">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>


<div id="result"></div>

CSS

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JavaScript

var one = document.getElementById('one');
var two = document.getElementById('two');
var result = document.getElementById('result');


result.innerHTML = '<p><b>one:</b> scrollWidth > clientWidth ' + (one.scrollWidth > one.clientWidth) + '</p>' +
    '<p><b>two:</b> scrollWidth > clientWidth ' + (two.scrollWidth > two.clientWidth) + '</p>';