本文當中我們主要為大家講解如何實現文本超出顯示為省略號；同時講解一下，在網頁開發與制作的時候，我們什么時候應該考慮內容撐開寬高，又應該在何時考慮文本超出的問題。
使用CSS實現元素的文本超出隱藏，通常存在兩種方式，一種是超出直接隱藏內容，另一種是超出顯示為省略號。
超出隱藏，只需要為一個有固定寬高設置為overflow:hidden;
css實現代碼如下：
多行文本超出顯示為省略號的需求，僅僅使用HTML和CSS就很難實現了。通常我們可以使用JS輔助進行實現。看如下案例：
基本原理很簡單：通過innerHTML獲取元素的內容，之后使用字符串方法進行截取，截取前49個字符，之后，在這49個字符之后連接一個“...”，最后，將這個截取后的字符串賦值給原來的元素內容即可。
通常是在考慮后臺對前端影響的時候，要針對超出部分進行處理。很多時候數據是從后臺傳到前端頁面當中的，那么有時有些地方內容會比較多，有些地方內容會比較少。針對這種情況我們做個簡單的整理：
1 對于img元素的父級標簽，需要設置超出隱藏；
2 對于列表頁的標題和內容描述部分，通常需要針對超出進行設置。多行的內容描述部分需要設置超出隱藏；單行的列表頁標題，可以設置超出隱藏或超出顯示為省略號；
3 對于內容頁的標題和內容，千萬不要隨意設置固定高度，也不要設置超出隱藏。
上一篇：如何優化網站前端頁面?
掃一掃 加微信咨詢
