博客园  :: 首页  :: 新随笔  :: 联系 :: 管理

CSS控制字符宽度省略号效果 兼容浏览器

Posted on 2009-01-08 14:24  周末  阅读(242)  评论(0编辑  收藏  举报

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

{  margin :  0 ;  padding :  0 ;   }
{  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 ; }