最近的開發中，文本超出隱藏總是一個沒有得到完整解決的問題，現在整理一遍，雖然也沒有得出一勞永逸的方案。

PURE CSS

單行隱藏

需要限制 width

overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

多行隱藏

移動端支持度很好，很方便，也不需要限制width

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;

任意行，只超出時對末尾顯示漸變點點點

重點是這個
這是自己模擬文本超出后的效果，不依賴原生
很巧妙的利用了浮動的特點，只看代碼的話，兼容起碼有ie9+， 手頭沒ie還沒具體測試
(原文)[http://dev.mobify.com/blog/multiline-ellipsis-in-pure-css/]
(可以配合翻譯一起看)[http://web.jobbole.com/90636/]

JS

(clamp.js)[https://github.com/josephschmitt/Clamp.js]

其實沒用過這個庫，只是看有人推薦， 也沒有考慮過使用js做這種事情

轉載于:https://www.cnblogs.com/lcysgsg/p/8698288.html

總結

以上是生活随笔為你收集整理的文本超出隐藏 综合整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。