JavaScript - DIV的可见文本

Question

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

请注意,我希望删除溢出,因此CSS省略号属性对我不起作用.所以基本上,我希望上面的文字看起来像这样:

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

纯JavaScript如何实现这一点？

编辑

我需要一个JavaScript函数来裁剪文本,因为我需要计算可见文本的字符.

Answer 1

好的,我没有看到问题的附录.虽然我之前曾说过使用JavaScript和非固定宽度的字体不可能做到这一点......实际上它是可能的!

您可以将每个单独的字符包装在a中<span>,并找到第一个<span>超出父级边界的字符.就像是:

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

这是一个演示.