首页 > Web开发 > 详细

CSS控制文字,超出部分显示省略号

时间:2019-12-03 16:35:29      阅读:103      评论:0      收藏:0      [点我收藏+]
单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
技术分享图片技术分享图片
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //3行
overflow: hidden;
技术分享图片技术分享图片
 
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);}
技术分享图片技术分享图片

CSS控制文字,超出部分显示省略号

原文:https://www.cnblogs.com/teoh/p/11977329.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!