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

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

  作者：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>

如：

CSS 一段文本怎設定超過省略符號顯示

我也想用CSS來控制多行超出用省略符號表示，如果CSS你會的話，可以教我。如果不會，我可以教你用jS或者jquery解決你的問題
 
網頁開發 怎動態讓超出寬度的文本顯示省略符號…的？

原理很簡單，就是通過不斷的比較寬度值，然後逐個縮短字元寬度，當最後寬度合適的時候，停止迴圈，就實現了文字溢出顯示…的效果。 具體闡述你看這個連結吧，有代碼解釋。
還有這些代碼問題你最好到些技術論壇問，肯定會受益的。
參考資料：blog.163.com/...33794/