如何使用text-overflow:ellipsis實(shí)現溢出文本省略號顯

本篇內容主要講解“如何使用text-overflow:ellipsis實(shí)現溢出文本省略號顯示無(wú)需js”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強。下面就讓小編來(lái)帶大家學(xué)習“如何使用text-overflow:ellipsis實(shí)現溢出文本省略號顯示無(wú)需js”吧!

今天在做jsp頁(yè)面展示的時(shí)候碰到一個(gè)實(shí)現溢出文本顯示省略號的需求

原本使用js截取字符串然后判斷字符串長(cháng)度實(shí)現，不過(guò)相對比較繁瑣，并且字符串長(cháng)度不能自適應

聽(tīng)說(shuō)用css的 text-overflow: ellipsis 也可以實(shí)現，于是嘗試了下。

發(fā)現除了設置 text-overflow 屬性為 ellipsis 外

還需要設置 white-space 屬性為 nowrap （限制不換行）

和 overflow 屬性為 hidden （隱藏溢出）

即設置樣式 style="text-overflow:ellipsis; white-space: nowrap; overflow: hidden;" 后測試成功

相比js方式不僅簡(jiǎn)便了許多而且會(huì )根據元素的寬度自適應

IE 8+，chrome 30，火狐26，測試通過(guò)