代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > css技巧 > CSS 控制字符宽度省略号效果 兼容浏览器

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

css技巧 围观4158次 更新日期:2017-06-25 15:12:57 留下足迹

兼容浏览器的CSS控制字符宽度省略号效果,是非常实用的,由于FF对溢出显示省略号的属性支持不好。因而在进行编码时,应用到了一个HACK和FF的私有属性,大家在学习时注意区别。
看CSS代码:
  1. * { margin0padding0; } 
  2. a { text-decorationnonecolor#000; } 
  3. a:hover { text-decorationnonecolor#000; } 
  4. ul {width300px;height:120pxmargin40px auto;padding12px 4px 12px 24px;border1px solid #D4D4D4;background#F1F1F1;} 
  5. li { margin12px 0; } 
  6. li a {displayblock;width120px;overflowhidden;/*注意不要写在最后了*/white-spacenowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;} 
  7. /* firefox only */ 
  8. li:not(p) {clearboth;} 
  9. li:not(p) a {max-width170px;floatleft;} 
  10. li:not(p):after {content"...";floatleft;width25px;padding-left5px;color#000;} 

 

转载请注明:代码学堂>web前端 > css技巧 > CSS 控制字符宽度省略号效果 兼容浏览器

喜欢 (631) or 分享 (280)