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

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

时间:2017-05-21 10:49:44      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:ext2   自动   今天   bre   库存   img   文章   ring   实现   

不做前端很久了,今天从重构师那里了解到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>

如下图:

技术分享

文章分享自php中文网,原文地址:http://www.php.cn/css-tutorial-360314.html

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

标签:ext2   自动   今天   bre   库存   img   文章   ring   实现   

原文地址:http://www.cnblogs.com/phpcn/p/6884071.html

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