今天在做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，測試通過