兼容浏览器的CSS控制字符宽度省略号效果,是非常实用的,由于FF对溢出显示省略号的属性支持不好。因而在进行编码时,应用到了一个HACK和FF的私有属性,大家在学习时注意区别。
*
{
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 ; }
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 ; }