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

CSS3怎样实现超出指定文本以省略号显示效果

时间:2017-08-04 10:02:12      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:mod   sso   hidden   splay   ips   htm   生产环境   pad   div   

  作者:zhanhailiang 日期:2014-10-24

不做前端非常久了,今天从重构师那里了解到CSS3已经能够实现非常多以往必须通过JS才干实现的效果,如渐变,阴影,自己主动截断文本展示省略号等等强大效果,并且这些功能日渐成熟,已经大量用于生产环境。H5真的日渐成熟了,得恶补下了。

下面分享实现指定文本超出部分以省略号展示的Demo:

<style>
.text1 {
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -moz-text-overflow:ellipsis;
    white-space:nowrap;
}
.text2 {
    width:200px;
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
</style>
 
<div class="text1">热卖精选:从子频道(服饰鞋包。亲子。居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list。数量为50个</div>
 
<br />
 
<div class="text2">热卖精选:从子频道(服饰鞋包,亲子,居家。美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>

例如以下图:

技术分享

CSS3怎样实现超出指定文本以省略号显示效果

标签:mod   sso   hidden   splay   ips   htm   生产环境   pad   div   

原文地址:http://www.cnblogs.com/yutingliuyl/p/7283100.html

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