JSFiddle - React, Tailwind, and code Playground

by Mahmud Ridwan

HTML

<div id="box"></div>

CSS

#box {
    width: 100px;
    height: 100px;
    border: 1px solid #289;
}

JavaScript

var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lacus, iaculis non nulla sit amet, ornare maximus nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec at neque convallis, gravida libero ac, vulputate magna. Aliquam eget arcu varius, euismod lectus ut, ultricies lorem. In scelerisque nisi ut tristique lacinia. Maecenas tincidunt mi sapien, convallis mattis augue aliquam non. Proin pellentesque at purus eget lobortis. Morbi id lorem sed quam mattis finibus in a neque.'

var box = document.getElementById('box')

var boxCl = document.createElement('div')
boxCl.style.position = 'absolute'
boxCl.style.visibility = 'hidden'
boxCl.style.width = box.clientWidth+'px'
boxCl.innerHTML = text
document.body.appendChild(boxCl)
var l = 0, h = text.length, i
while(l <= h) {
    i = Math.floor((l+h)/2)
    boxCl.innerHTML = text.substring(0, i)+'...'
    if(boxCl.clientHeight > box.clientHeight) {
        h = i-1
    } else if(boxCl.clientHeight < box.clientHeight) {
        l = i+1
    }
}
for(; i >= 0 && boxCl.clientHeight > box.clientHeight; --i) {
    boxCl.innerHTML = text.substring(0, i)+'...'
}
box.innerHTML = boxCl.innerHTML