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

  作者：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>

例如以下图：