如何使文本溢出省略号适用于多行文本？ [复制]答案

【问题标题】：How to make text-overflow ellipsis work on multi-line text? [duplicate]如何使文本溢出省略号适用于多行文本？ [复制]
【发布时间】：2015-09-16 19:24:28
【问题描述】：

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

【问题讨论】：

见stackoverflow.com/questions/6572330/…、stackoverflow.com/questions/6222616/…、stackoverflow.com/questions/25448511/…、stackoverflow.com/questions/30499108/…、stackoverflow.com/questions/14596777/…、stackoverflow.com/questions/15909489/…等。

标签： javascript css

【解决方案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 的新值加上三个点。

适用于谷歌浏览器 4+、IE 8+、Firefox 3+、Safari 4+ ，以及（我认为）所有 Opera 版本。

这非常简单易行，但我在 google 上找到的只是其他长的 jQuery 库，这些库具有您需要提供所需的行数才能使其工作的函数等。

编辑

但是，此解决方案不完全等同于 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);

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

【讨论】：