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

以下分享實現指定文本超出部分以省略號展示的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>

 

如下圖：