兼容ie的多行文本溢出隐藏,并显示省略号

简单说明:在文本最后一行结尾添加一个遮罩(透明 → 白)遮罩上放省略号。
效果如下↓
在这里插入图片描述

html部分

<div class="text"> 你的文本内容吧啦吧啦,多写点方便测试 </div>

css部分

text {
	word-break:break-all;    /* 单词打断,可以让显示美观一些 */
	width: 150px;
	line-height: 20px;    /* 单行文本高度 */
	position: relative;
	overflow: hidden;
}
.text::after {
	content: "..."; 
	position: absolute; 
	bottom: 0; 
	right: 0; 
	padding-left: 20px;    /* 省略号宽度 */
	background: -webkit-linear-gradient(left, transparent, #fff 55%);    /* #fff为遮罩颜色,下同↓ */
	background: -o-linear-gradient(right, transparent, #fff 55%);
	background: -moz-linear-gradient(right, transparent, #fff 55%);
	background: linear-gradient(to right, transparent, #fff 55%);
}

js部分

// 注意,此处使用了jquery,如果不想引入jquery的话可以把下面的jq代码逻辑用js写一遍
$(function(){
 // 获取文本的行高,并获取文本的高度,假设我们规定的行数是五行,那么对超过行数的部分进行限制高度,并加上省略号
   $('.text').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));    // 当前文本行高
        var height = parseInt($(this).height());    // div容器高度
        if((height / lineHeight) >2 ){    // 此处 2 为限制行数
            $(this).addClass("text_after")    // 超过两行添加省略号
            $(this).css("height","40px");    // 此处 40px 对应上面的 2 行(因为css中设置的行高是20px,js中限制的行数为 2 行,所以超出两行后高度固定为40px)
        }else{
            $(this).removeClass("text_after");    // 不足两行删除省略号
        }
    });
})

PS:复制粘贴代码后 可能 需要修改的位置
1.css中的 line-height(设置为你需要的行高
2.css中遮罩层的颜色(设置为你需要的背景色
3.js中的限制行数(设置为你需要最大行数
4.js中超过限制行数后的固定高度(设置为你的 行高 * 最大行数

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章