之前一直以為單行文本溢出追加省略號沒法兼容所有瀏覽器,經(jīng)元泉同志提點,順利解決:
.box { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
樣式代碼,四個屬性都是必須的,并且寬度必須設(shè)在當(dāng)前容器上,父容器定寬無效:
測試 IE6、IE7、IE8、IE9、Chrome、Firefox 均支持。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>text overflow ellipsis - wfuyu.com</title><style>.box {width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style></head><body><h1>text overflow ellipsis</h1><div class="box">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div></body></html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能顯示效果,請按Ctrl+F5刷新本頁,更多網(wǎng)頁代碼:<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></div>提示:可修改后代碼再運行!
上一篇 Access數(shù)據(jù)庫技術(shù)(18)
下一篇 利用jQuery插件打造簡潔的回到頂部按鈕
程序員人生,我編程,我富裕,記住wfuyu網(wǎng),php教程,php學(xué)習(xí),php手冊,CMS模版制作
聲明:本站大部分內(nèi)容是作者原創(chuàng),少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí),原版權(quán)很多不明,如有侵權(quán)請聯(lián)系本站,謝謝!
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權(quán)所有