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

请注意，我希望删除溢出，因此 CSS ellipsis 属性对我不起作用。所以基本上，我希望上面的文字看起来像这样：

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

纯 JavaScript 怎么可能？

编辑

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

4

5 回答 5

6

好的，我没有看到问题的附录。虽然我之前说过，使用 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;
}

这是一个演示。

于 2012-05-05T18:38:16.860 回答
3

您可以使用 Javascript 执行此操作。这是一个计算元素中可见字符数的函数，与应用于元素的外部 css 表和内联样式无关。我只在 Chrome 中测试过，但我认为它是跨浏览器友好的：

function count_visible(el){
    var padding, em, numc;
    var text = el.firstChild.data;
    var max = el.clientWidth;

    var tmp = document.createElement('span');
    var node = document.createTextNode();
    tmp.appendChild(node);
    document.body.appendChild(tmp);

    if(getComputedStyle)
        tmp.style.cssText = getComputedStyle(el, null).cssText;
    else if(el.currentStyle)
        tmp.style.cssText = el.currentStyle.cssText;

    tmp.style.position = 'absolute';
    tmp.style.overflow = 'visible';
    tmp.style.width = 'auto';

    // Estimate number of characters that can fit.
    padding = tmp.style.padding;
    tmp.style.padding = '0';
    tmp.innerHTML = 'M';
    el.parentNode.appendChild(tmp);
    em = tmp.clientWidth;
    tmp.style.padding = padding;      
    numc = Math.floor(max/em);

    var width = tmp.clientWidth;

    // Only one of the following loops will iterate more than one time
    // Depending on if we overestimated or underestimated.

    // Add characters until we reach overflow width
    while(width < max && numc <= text.length){
        node.nodeValue = text.substring(0, ++numc);
        width = tmp.clientWidth;
    }

    // Remove characters until we no longer have overflow
    while(width > max && numc){
        node.nodeValue = text.substring(0, --numc);
        width = tmp.clientWidth;
    }

    // Remove temporary div
    document.body.removeChild(tmp);

    return numc;
}

JSFiddle 示例

于 2012-05-05T19:25:12.903 回答
2

试试这个，如果你可以的话，它需要一个固定的宽度：http: //jsfiddle.net/timrpeterson/qvZKw/20/

HTML：

<div class="col">This is my text inside a div and I want the overf|low of the text to be cut</div>

CSS：

.col { 
   width:120px; 
    overflow: hidden;
   white-space:nowrap;

 }​
于 2012-05-05T18:40:06.983 回答
2

您正试图将 CSS 问题强加到 JavaScript 中。把锤子收起来，拿出螺丝刀。 http://en.wiktionary.org/wiki/if_all_you_have_is_a_hammer,_everything_looks_like_a_nail

如果您退后一步，解决字符数的答案可能无关紧要。最后一个字符可能只是部分可见，并且考虑到字体大小的变化、W 和 i 之间的宽度差异等，字符数会有很大的不同。在真正的问题中，可能 div 的宽度比字符数更重要。

如果您仍然坚持找出可见的字符，请在文本周围的 div 内放置一个跨度，使用此问题的其他答案中提供的 css，然后在 JavaScript 中一次从字符串中修剪一个字符，直到跨度的宽度小于 div 的宽度。然后每次对大段落执行此操作时，请注意浏览器会冻结几秒钟。

于 2012-05-05T18:42:21.180 回答
0

.col { width:40px; overflow: hidden; white-space:nowrap; }

空白：nowrap；当内容有空格时需要。

无论哪种方式，都不会出现单行中的长单词。http://jsfiddle.net/h6Bhb/

于 2012-05-05T18:34:17.977 回答