如何使文本溢出省略号适用于多行文本？

Question

如何在不使用纯javascript的text-overflow: ellipsis的情况下使white-space: nowrap在多行文本中工作，而不包含任何jQuery库且不指定行数？

Answer 1

我做了很多搜索，我找不到任何简单而纯粹的Javascript解决方案。所以我最终制作了自己的：

function ellipsis(el){
    var elheight =  el.offsetHeight;
    var eltxt = el.innerHTML;
    while (elheight < el.scrollHeight){
        eltxt = eltxt.substring(0, eltxt.length - 1);
        el.innerHTML = eltxt + '...';
    }
}

elheight包含框的实际高度（使用offsetHeight）

scrollHeight为我们提供了框内容的高度（包括溢出文本）

此函数将框内容存储在eltxt内，然后继续检查框的实际大小是否仍然小于其内容，并且每次从eltxt删除1个字符并替换元素的内容由eltxt的新值加上三个点组成。

适用于Google Chrome 4 + ，IE 8 + ，Firefox 3 + ，Safari 4 + ，（我认为）所有 Opera版本。

它非常简单易用，但我在google上找到的只是其他长jQuery库，你需要提供所需的行数以便它们工作等等。

修改

但是，此解决方案 NOT 与text-overflow: ellipsis完全等效，因为它不会隐藏额外的文本，而是删除它。因此，如果你的盒子有一些动画并且它的尺寸应该改变（例如变得更宽），那么你的文本就不会再出现了。在这种情况下，我建议在函数外部存储盒子的文本，然后每次盒子的尺寸发生变化时运行该函数，方法是将盒子的文本作为第二个参数：

var myElementsText = myElement.innerHTML;
function ellipsis(el, txt){
    var elheight =  el.offsetHeight;
    var eltxt = txt;
    while (elheight < el.scrollHeight){
        eltxt = eltxt.substring(0, eltxt.length - 1);
        el.innerHTML = eltxt + '...';
    }
}
function changeSize(el){
    el.ClassName = 'new_class_with_different_dimensions';
    function ellipsis(el, myElementsText);
}

现在如果你运行

changeSize(myElement);

该框的原始文本带有新的省略号。