利用css3實現超出文本指定行數與省略號效果

<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>
 
<div class="text2">熱賣精選：從子頻道（服飾鞋包，親子，居家，美妝）檔期裏面挑選出來，庫存大於30%的高信價比商品list，數量爲50個</div>