码迷,mamicode.com
首页 > Web开发 > 详细

多余文字转化为省略号css

时间:2017-08-17 15:44:18      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:border   转化   psi   amp   技术分享   src   com   设置   over   

1.text-overflow:ellipsis实现

overflow: hidden;
text-overflow: ellipsis;//clip|ellipsis
white-space: nowrap;

技术分享

 

2.-webkit-line-clamp  

width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
border:solid 1px black;

技术分享

3.用包含省略号(…)的元素模拟实现

.demo {
    height: 200px;
    width: 200px;
    position:relative;
    line-height:1.4em;
    height:4.2em;
    overflow:hidden;
}
.demo::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 -20px 1px 45px;
    background-color:white;
}

这里用一个包含了省略号,且背景色为白色的伪元素遮盖了部分内容。高度 height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。

这种思路实现较为简单,兼容性也比较好

技术分享

 

多余文字转化为省略号css

标签:border   转化   psi   amp   技术分享   src   com   设置   over   

原文地址:http://www.cnblogs.com/dcapple/p/7381966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!