今天在做jsp頁面展示的時(shí)候碰到一個(gè)實(shí)現(xiàn)溢出文本顯示省略號的需求
原本使用js截取字符串然后判斷字符串長度實(shí)現(xiàn),不過相對比較繁瑣,并且字符串長度不能自適應(yīng)
聽說用css的 text-overflow: ellipsis 也可以實(shí)現(xiàn),于是嘗試了下。
發(fā)現(xiàn)除了設(shè)置 text-overflow 屬性為 ellipsis 外
還需要設(shè)置 white-space 屬性為 nowrap (限制不換行)
和 overflow 屬性為 hidden (隱藏溢出)
即設(shè)置樣式 style="text-overflow:ellipsis; white-space: nowrap; overflow: hidden;" 后測試成功
相比js方式不僅簡便了許多而且會(huì)根據(jù)元素的寬度自適應(yīng)
IE 8+,chrome 30,火狐26,測試通過
新聞熱點(diǎn)
疑難解答
圖片精選