首 页
网络学院
视频教程
资源下载
HOT
实例教程
图文教程
专题中心
学习社区
繁體中文
当前位置:
首页
>
图文教程
>
网页制作
>
CSS样式表
> CSS 控制字符宽度省略号效果 兼容浏览器
CSS样式表
用css实现图片垂直居中的使用技巧
CSS List Grid Layout 图片垂直居中
IE6网页神奇BUG
Marquee高级用法实例代码
web标准知识——从p开始,循序渐进
web标准知识——用途相似的标签
html链接与文本标签们
当标题不能显示完整的解决方法
详解链接的rel与target区别
使css兼容IE8的小技巧
CSS 首字母大写代码
CSSvista可同时在IE和Fifrefox调试的CSS编辑提供下载
css font缩写总结附实例
css下margin、padding、border、background和font缩写示例
用CSS来控制图片显示大小的代码
css下划线颜色一句话代码
css常见问题解决方法小结
relative absolute无法冲破的等级问题解决
div总是被select遮挡的解决方法
CSS文字截取功能实现代码
No.
«
‹
46
47
48
49
›
»
技术文章搜索
关键字
CSS样式表 中的 CSS 控制字符宽度省略号效果 兼容浏览器
出处:
互联网
整理:
软晨网(RuanChen.com)
发布:
2009-09-11
浏览: 201 ::
收藏到网摘: n/a
不同浏览器的CSS Hack写法小结
纯CSS实现的三级下拉菜单实现代码
兼容浏览器的CSS控制字符宽度省略号效果,是非常实用的,由于FF对溢出显示省略号的属性支持不好。因而在进行编码时,应用到了一个HACK和FF的私有属性,大家在学习时注意区别。
看下面的HTML代码:
<ul>
<li><a href="http://www.ruanchen.com/"htmlarea">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS控制字符宽度省略号效果 兼容浏览器</title> <style> * { 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;} </style> </head> <body> <ul> <li><a href="http://www.ruanchen.com/">使用CSS最佳习惯 </a></li> <li><a href="http://www.ruanchen.com/">说说XHTML中的alt属性和title属性 </a></li> <li><a href="http://www.ruanchen.com/">IE中伪类:hover的使用及BUG </a></li> <li><a href="http://www.ruanchen.com/">52CSS公告</a></li> </ul> </body> </html>
提示:您可以先修改部分代码再运行
不同浏览器的CSS Hack写法小结
纯CSS实现的三级下拉菜单实现代码
评论 (0)
All
登陆
还没注册?