CSS3如何?超出指定文本以省略符號顯示效果

標籤：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如何?超出指定文本以省略符號顯示效果