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

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),西夏企業(yè)網(wǎng)站建設(shè),西夏品牌網(wǎng)站建設(shè),網(wǎng)站定制,西夏網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,西夏網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

原本使用js截取字符串然后判斷字符串長(zhǎng)度實(shí)現(xiàn)，不過(guò)相對(duì)比較繁瑣，并且字符串長(zhǎng)度不能自適應(yīng)

聽(tīng)說(shuō)用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;" 后測(cè)試成功

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

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

到此，相信大家對(duì)“如何使用text-overflow:ellipsis實(shí)現(xiàn)溢出文本省略號(hào)顯示無(wú)需js”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！