如何使文本溢出省略号在多行文本上工作

How to make text-overflow ellipsis work on multi-line text?

本文关键字：文本 工作 省略号 何使 溢出      更新时间：2023-09-26

我如何使text-overflow: ellipsis工作在多行文本不应用white-space: nowrap，与纯javascript，不包括任何jQuery库和不指定行数?

我对此进行了大量搜索，但我找不到任何简单而纯粹的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的新值加上三个点替换元素的内容。

它作用于谷歌chrome 4 + ,即 8 + , Firefox 3 + , Safari 4 + ,,(我认为)所有歌剧版本。

这是非常简单和容易的，但我在谷歌上发现的是其他长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);

这个方框将有原来的文本和新的省略号。

相关文章：