兼容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中超过限制行数后的固定高度（设置为你的 行高 * 最大行数 ）

兼容ie的多行文本溢出隐藏，并显示省略号相关推荐

CSS多行文本溢出隐藏，显示省略号
单行文本溢出隐藏: overflow: hidden; 单行文本溢出隐藏显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ell ...
html文本自动省略,css单行、多行文本溢出时自动显示省略号方法
在实际项目开发中,经常会遇到这样的需求,需要我们把单行或者多行文字溢出时自动显示省略号,今天码云笔记就为大家通过多种方法来实现本末尾省略号显示这一需求. 我们先从最原始的开始,单行文本溢出如何显示省略 ...
CSS文本溢出隐藏，显示省略号
仅供自己记录,老用还不记得,哈哈哈笨死了!!! 单行文本溢出隐藏: overflow: hidden; 单行文本溢出隐藏显示省略号: white-space: nowrap; overflow: hi ...
文字溢出隐藏并显示省略号--CSS省略号
单行文本文字超出隐藏并显示省略号: .box {white-space: nowrap;text-overflow:ellipsis;overflow:hidden; } 多行文本(展示2行)文字超出 ...
css不换行,溢出隐藏，显示省略号
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
css多行文本溢出隐藏ie,多行文本溢出隐藏处理，兼容ie，火狐
思路获取目标文本行高line-height,内容高度offsetHeight 假设 2 行文本溢出隐藏内容高度除以行高大于2,则加上溢出隐藏的css类名 css代码 .text{ line-hei ...
多行文本溢出隐藏省略号
多行文本溢出隐藏省略号一.单行文本溢出二.多行文本溢出一.单行文本溢出 /* 单行文本溢出 */.inlines{overflow: hidden;white-space: nowrap;tex ...
CSS单行、多行文本溢出隐藏
1.单行文本溢出隐藏 .class{white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } 在这里需要注意的是overflow只能作用 ...
css单行、多行文本溢出隐藏显示省略号
单行文本溢出隐藏 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出时发生的事,ellipsis表示用省略号代替溢出的文本 white ...

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

html部分

css部分

js部分

兼容ie的多行文本溢出隐藏，并显示省略号相关推荐

最新文章

热门文章