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

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

实现的效果图：

实现的代码：

<p class="content">
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
<div class="more">查看全文</div>
</p><style>
.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;
}
</style>

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

注：

将height设置为line-height的整数倍，防止超出的文字露出。
给.content::after添加渐变背景可避免文字只显示一半。
由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。

css多行显示省略号同时将最后一行只显示一半，查看全文效果相关推荐

Python绘制桑基图Sankey,Pyecharts不显示html页面,桑基图只显示标题,原因总结
Python绘制桑基图Sankey,Pyecharts不显示html页面,桑基图只显示标题,原因总结说说使用上的三点注意: 1.nodes中的"name"不要重新命名,否则会不识 ...
css之-单行文本溢出显示省略号，多行文本溢出显示省略号
单行显示省略号 white-spacing:nowrap; overflow:hidden; text-overflow:ellipsis; 规定某行显示省略号 -webkit-line-climp: ...
【CSS】文字溢出问题 ( 强制文本在一行中显示 | 隐藏文本的超出部分 | 使用省略号代替文本超出部分 )
文章目录一.文字溢出问题二.文字溢出处理方案三.代码示例一.文字溢出问题在元素对象内部显示文字 , 如果文本过长 , 则会出现文本溢出的问题 ; 下面的示例中 , 在 150x25 像素的盒 ...
css多行超出省略号（一行超出省略号）
多行超出显示省略号: <style> div { width:400px; height:60px; line-height:30px; margin:0auto; border:1pxs ...
html5数据超出显示省略号,h5文字超出，两行显示，超出显示省略号
最近接到一个需求,要求商场导航里的文字最多显示两行,超出两行的省略号显示,查一些资料,又根据自己的需求,改了很多,直接上代码吧 .main{ width: 360px; border: 1px sol ...
php验证码显示碎图片,我的验证码只显示破碎的小图片
源自:2-1 验证码制作我的验证码只显示破碎的小图片 header("content-type:image/gif"); //通过GD库做验证码 //创建画布 session_s ...
服务器内存2666显示2400,2666MHz内存为什么系统只显示2400MHz呢？有这几种原因
大家有没有这种感觉,以前觉得8GB内存已经够了,现在觉得不是16GB的笔记本都不值得买.对于已经购买笔记本的朋友,特别是选购那种内置插槽能够升级内存的朋友,升级内存似乎是比较容易的事情. 不过你可能会 ...
HTML文字溢出显示省略号和鼠标放在文字上显示全部文字信息
代码 <div th:title="${stampDetail.stampData}" style="white-space: nowrap;overflow: h ...
电脑连接wifi怎么显示宽带连接服务器,电脑中只显示宽带连接不显示wifi是怎么回事...
有时无线笔记本不显示怎么办呢,下面小编就为大家介绍笔记本电脑不显示无线网络的解决方法,不会的朋友快快来学习吧! 提示: 请确认已经安装无线网卡驱动并更新到较高版本另外可能需要打开笔记本的无线 ...

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

实现的效果图：

实现的代码：

css多行显示省略号同时将最后一行只显示一半，查看全文效果相关推荐

最新文章

热门文章