Question

----------------------------------------------------
| This is my text inside a div and I want the overf|low of the text to be cut
----------------------------------------------------

Please note that I want the overflow to be removed, so the CSS ellipsis property would not work for me. So basically, I want that the text above to appear like this:

----------------------------------------------------
| This is my text inside a div and I want the overf|
----------------------------------------------------

How is this possible with pure JavaScript?

EDIT

I need a JavaScript function to crop the text because I need to count the characters of the visible text.

Answer 1

Okay, I didn’t see the addendum to the question. Although I had previously said it wasn’t possible to do this using JavaScript and a font that isn’t fixed-width… it actually is possible!

You can wrap each individual character in a <span>, and find the first <span> that is outside the bounds of the parent. Something like:

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;
}

Here’s a demo.