CSS实现单行和多行文本溢出显示省略号……

1.单行文本溢出显示省略号…

单行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分

.ellipsis{//单行文本溢出 overflow: hidden; text-overflow:ellipsis;//文本溢出显示省略号 white-space:nowrap;//文本不会换行（单行文本溢出） width:130px; background-color: red; }

2.多行文本溢出显示省略号…

多行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分

.mult_line_ellipsis{//多行文本溢出 overflow: hidden; text-overflow:ellipsis;//文本溢出显示省略号 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width:130px; background-color:cornflowerblue; }

3.跨浏览器兼容的方法

浏览器兼容伪类写法css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分

.imitate_ellipsis{ position:relative; line-height:1.4em; height:2.8em; overflow:hidden; width:130px; background-color: orange; } .imitate_ellipsis::after{ content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding-left:20px; background: -webkit-linear-gradient(left, transparent, #fff 62%); background: -o-linear-gradient(right, transparent, #fff 62%); background: -moz-linear-gradient(right, transparent, #fff 62%); background: linear-gradient(to right, transparent, #fff 62%); }

4.js实现单行溢出省略号…（参数1是允许最大文字数目，参数2是元素节点的id）

浏览器兼容伪类写法css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分

原文：https://blog.csdn.net/xiaoqingpang/article/details/78952621