CSS3怎樣實現超出指定文本以省略符號顯示效果

標籤：mod   sso   hidden   splay   ips   htm   生產環境   pad   div   

  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>

例如以：

CSS3怎樣實現超出指定文本以省略符號顯示效果