CSS 控制字符寬度省略號效果 兼容瀏覽器
發(fā)布時間:2009-01-03 00:17:36 作者:佚名
我要評論
兼容瀏覽器的CSS控制字符寬度省略號效果,是非常實用的,由于FF對溢出顯示省略號的屬性支持不好。因而在進行編碼時,應用到了一個HACK和FF的私有屬性,大家在學習時注意區(qū)別。
看下面的HTML代碼:
兼容瀏覽器的CSS控制字符寬度省略號效果,是非常實用的,由于FF對溢出顯示省略號的屬性支持不好。因而在進行編碼時,應用到了一個HACK和FF的私有屬性,大家在學習時注意區(qū)別。
看下面的HTML代碼:
<ul>
<li><a href="http://www.dhdzp.com/">使用CSS最佳習慣 </a></li>
<li><a href="http://www.dhdzp.com/">說說XHTML中的alt屬性和title屬性 </a></li>
<li><a href="http://www.dhdzp.com/">IE中偽類:hover的使用及BUG </a></li>
<li><a href="http://www.dhdzp.com/">52CSS公告</a></li>
</ul>
看CSS代碼:
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 300px;height:120px; margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #D4D4D4;background: #F1F1F1;}
li { margin: 12px 0; }
li a {display: block;width: 120px;overflow: hidden;/*注意不要寫在最后了*/white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
li:not(p) {clear: both;}
li:not(p) a {max-width: 170px;float: left;}
li:not(p):after {content: "...";float: left;width: 25px;padding-left: 5px;color: #000;}
查看最終運行效果:
提示:您可以先修改部分代碼再運行
看下面的HTML代碼:
<ul>
<li><a href="http://www.dhdzp.com/">使用CSS最佳習慣 </a></li>
<li><a href="http://www.dhdzp.com/">說說XHTML中的alt屬性和title屬性 </a></li>
<li><a href="http://www.dhdzp.com/">IE中偽類:hover的使用及BUG </a></li>
<li><a href="http://www.dhdzp.com/">52CSS公告</a></li>
</ul>
看CSS代碼:
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 300px;height:120px; margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #D4D4D4;background: #F1F1F1;}
li { margin: 12px 0; }
li a {display: block;width: 120px;overflow: hidden;/*注意不要寫在最后了*/white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
li:not(p) {clear: both;}
li:not(p) a {max-width: 170px;float: left;}
li:not(p):after {content: "...";float: left;width: 25px;padding-left: 5px;color: #000;}
查看最終運行效果:
提示:您可以先修改部分代碼再運行
相關文章
- 單行文本的控制,以前是由程序員完成的,2008-10-17
- 字符串過長,不雅觀,如何實現(xiàn)多余文字街去掉并用省略號顯示,苦思冥想多日,發(fā)現(xiàn)使用CSS就可輕松搞定,下面將經(jīng)驗心得與大家分享一番,望幫助更多的失足新手2014-06-16
- 這篇文章主要介紹了css實現(xiàn)字符串截斷并加省略號示例,需要的朋友可以參考下2014-05-08
通過純CSS樣式實現(xiàn)DIV元素中多行文本超長自動省略號
可以通過css樣式實現(xiàn)DIV元素中文本超長后自動截斷并以省略號結尾,一般情況下都是使用javascript,其實使用純CSS樣式也可以做到2014-05-05- 這篇文章主要介紹了css樣式怎么顯示省略號,即當超過自定義寬度時隱藏顯示省略標記,比較實用,需要的朋友可以參考下2014-04-18
- DIV CSS text-overflow文本有溢出時顯示css省略號clip ellipsis樣式基礎知識與用法實例經(jīng)驗教程篇2014-11-12
- 在項目中我們經(jīng)常需要在文本過長時顯示,將文本超出的部分內(nèi)容用省略號代替,基于css代碼是怎么實現(xiàn)的呢?下面腳本之家小編通過分析本文給大家詳解,感興趣的朋友一起學習2016-01-19

