多行文本溢出显示省略号【兼容IE】

从单行文本溢出显示省略号到多行文本溢出显示省略号，其实是在正常不过的需求了，毕竟新闻等封面介绍的文案不可能全部显示文案内容。然而，在这毒瘤般的IE面前，这个需求对于开发来说又略显多余...

奈何胳膊拗不过大腿，只能尽力解决...

对于国内客户/用户来说，熟知的浏览器大概就是 360/IE/搜狗这等毒瘤般存在的东西了，自然题述的需求是要做的，下面说明个人的一些见解。

单行文本溢出省略号

.ellipsis {
    overflow: hidden; /* 超出隐藏 */
  white-space: nowrap; /* 文本不换行 */
  text-overflow: ellipsis; /* 文本超出呈现方式：省略号 */
}

文本超出的呈现方式有多种，更详细的了解方案，[请戳>>]

多行文本溢出省略号 | 方案一 | 原生属性

.lineclamp {
    overflow:hidden; /* 超出隐藏 */
  text-overflow:ellipsis; /* 文本超出呈现方式：省略号 */
  display:-webkit-box; /* 盒模型 */
  -webkit-line-clamp:2; /* 限制文本行数 */
  -webkit-box-orient:vertical; /* 盒内子元素布局方向 */
}

由于使用的是原生属性来做，其呈现效果不错，能够自行判断需要限制的极限区域以及裁剪的文本内容。但是其-webkit-line-clamp是个非规范性的属性，针对于WebKit内核的浏览器支持性较好，而对于目标浏览器【万恶的IE】没有兼容，导致其在IE下呈现只截断，不显示省略号。

多行文本溢出省略号 | 方案二 | css模拟

CSS 模拟方案不止于此，可以自行百度出其他方案，在此只列出鄙人使用过的方案

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(../images/ellipsis_bg.png) repeat-y;
}

多行文本溢出省略号 | 方案三 | js模拟

使用js模拟的方式，可考虑和css搭配使用。通过计算文本个数和容器内能容下的文本个数对比，对于过长的部分进行截取，并以“...”来占位容器内最末尾的一部分距离。由于页面内需要进行多行文本溢出省略号这一需求的不止一处，进而封装成函数，通过适当的调用来达到复用的目的。

部分 classname 说明

.linelip 即需要进行隐藏文本的盒容器

elip2 / elip3 表示的是文本的行数。需要注意的是，此处应当定义成盒子需要的高度，高度等于行高 * 行数。

function linelip(lineNum, tagele) {
    var eles = document.getElementsByClassName(tagele);
    var lineNum = lineNum || 2; 
    for (var i = 0; i<eles.length; i++) {
        var element = eles[i]
        var text = element.textContent;
        var totalTextLen = element.textContent.length;
        var baseWidth = window.getComputedStyle(element).width; 
        var baseFontSize = window.getComputedStyle(element).fontSize;
        var lineWidth = baseWidth.slice(0,-2);
        var strNum = Math.floor(lineWidth/ baseFontSize.slice(0,-2));
        var content = "";
        var totalStrNum = Math.floor(strNum * lineNum);
        var lastIndex = totalStrNum - totalTextLen;
        if (totalTextLen > totalStrNum) {
            content = text.slice(0, lastIndex - 1).concat("...");
        }else {
            content = text;
        }
        element.innerHTML = content;
    }
}

.demo {width: 200px; /* 多行文本外层盒子，demo仅提供需要的宽度信息。*/
border:1px solid #c1c1c1; margin-bottom:20px; font-size:14px;} 
/*** 主要样式代码，可作为参考使用 ***/
.linelip {overflow: hidden;}
.elip2 {height:40px; line-height:20px;}
.elip3 {height:60px; line-height:20px;}

/* 可考虑根据行数定义class类，达到复用的目的 */
linelip(2,"elip2");
linelip(3,"elip3");

IE 浏览器下的呈现结果，

后记 | JS 方案优化

由于上述方案的核心是：

其实也很好理解，所以基础的计算核心没什么内容，然而再实际项目应用中出现了如下的bug

如下截图，涉及项目部分数据内容脱敏处理，希望理解~~

该区域内除设置相关属性外，文本的截取出现差异，让我总觉得是因为 text-align:center;影响的，然而不是，主要原因在于:中文字符的字宽和英文字符的字宽不等，上述算法中无论中英文均算作1个单位~ 在考虑上述成因后，决定将中文字符转成英文字符计算，即中文当作是2个英文字母~

主要修改

通过上述修改后，比较良好的支持中文、中英文混合的多行文本溢出省略号显示的需求~

此方案可兼容IE浏览器，且在chrome浏览器种拥有良好的呈现。如若需要此需求实现方式，可以查看下github上相关代码及demo，嘻嘻(●'◡'●)

为了方便实现多行文本溢出这个需求，您也可以通过 npm i linelip放到您的Node项目中
如若被采纳，感谢支持！
对于功能及代码有不正之处，感谢您的指正！

Github代码地址：Linelip.js

参考链接

• 多行文本溢出显示省略号（全攻略）

• 可能是最全的“文本溢出截断省略”方案合集

• MDN上关于text-overflow属性更多的详解

多行文本溢出显示省略号 【兼容IE】