JSFiddle - React, Tailwind, and code Playground

by minitech

HTML

<div>Lorem ipsum dolor sit amet, athenagoram rigorem nisl cum magna anima te ad quia ad suis. Supervenit discrimina materialitas filia dedit erat, pertulit sed eu fugiens laudo misera Tharsia. Mancipia dolor invenerit adduci in fuerat accidens quam crucis coniunx, post discipulae venit est Apollonius mihi quidditas tuo dolor ad suis. Quodsi animae tertio eam ad te in. Dicis ubi diu requievit agi coepit.</div>

CSS

div {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
}

JavaScript

function countVisibleCharacters(element) {
    var text = element.firstChild.nodeValue;
    var r = 0;
    
    element.removeChild(element.firstChild);
    
    for(var i = 0; i < text.length; i++) {
        var newNode = document.createElement('span');
        newNode.appendChild(document.createTextNode(text.charAt(i)));
        element.appendChild(newNode);
        
        if(newNode.offsetLeft < element.offsetWidth) {
            r++;
        }
    }
    
    return r;
}

var c = countVisibleCharacters(document.getElementsByTagName('div')[0]);

alert(c + ' characters are visible.');