首 页
网络学院
视频教程
资源下载
HOT
实例教程
图文教程
专题中心
学习社区
繁體中文
当前位置:
首页
>
图文教程
>
网页制作
>
CSS样式表
> CSS 控制字符宽度省略号效果 兼容浏览器
CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色
No.
«
‹
113
114
115
116
›
»
技术文章搜索
关键字
CSS样式表 中的 CSS 控制字符宽度省略号效果 兼容浏览器
出处:
互联网
整理:
软晨网(RuanChen.com)
发布:
2009-09-11
浏览: 92 ::
收藏到网摘: 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
登陆
还没注册?