css多行省略号后面带查看更多,css多行显示省略号同时将最后一行只显示一半，查看全文效果...

纯CSS就可以做出来，不需要通过后端来截取返回带有"..."的效果。

实现的效果图：

实现的代码：

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

查看全文

.content{

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

position: relative;

line-height: 20px;

max-height: 40px;

}

.content:after{

content: "...";

position: absolute;

bottom: 0;

right: 0;

padding-right: 352px;

padding-left: 4px;

background: linear-gradient(to right, transparent, #fff 0%);

}

.more{

position: absolute;

bottom: 0;

color: #2522ff;

right: 283px;

z-index: 9;

cursor: pointer;

}

适用范围：

该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注：

将height设置为line-height的整数倍，防止超出的文字露出。

给.content::after添加渐变背景可避免文字只显示一半。

由于ie6-7不显示content内容，所以要添加标签兼容ie6-7(如：…)；兼容ie8需要将::after替换成:after。

标签：多行,省略号,after,兼容,content,overflow,height,css

来源： https://blog.youkuaiyun.com/weixin_41535944/article/details/111310809