css把超出的部分显示为省略号的方法兼容火狐


Posted in Javascript onJuly 23, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
<html>   
<head>   
<meta http-equiv="Content-Type" c>   
<title>css把超出的部分显示为省略号的方法兼容火狐_三水点靠木_3water.com</title>   
<style>   
* { margin: 0; padding: 0; }    
a { text-decoration: none; color: #000; }    
a:hover { text-decoration: none; color: #000; }    
ul {    
width: 300px;    
margin: 40px auto;    
padding: 12px 4px 12px 24px;    
border: 1px solid #D4D4D4;    
background: #F1F1F1;    
}    
li { margin: 12px 0; }    
li a {    
display: block;    
width: 80px;    
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="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
</ul>   
</body>   
</html> 

Javascript 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
vue如何截取字符串
May 06 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 #Javascript
用js遍历 table的脚本
Jul 23 #Javascript
JavaScript 版本自动生成文章摘要
Jul 23 #Javascript
javascript 支持ie和firefox杰奇翻页函数
Jul 22 #Javascript
IE8 引入跨站数据获取功能说明
Jul 22 #Javascript
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 #Javascript
js停止输出代码
Jul 20 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php google或baidu分页代码
2009/11/26 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
开启PHP的伪静态模式
2015/12/31 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现登陆文件验证方法
2018/10/06 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
用pycharm开发django项目示例代码
2019/06/13 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
教师绩效考核方案
2014/01/21 职场文书
市场安全管理制度
2014/01/26 职场文书
取保候审保证书
2014/04/30 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
2016新年慰问信范文
2015/03/25 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
聘任书的格式及模板
2019/10/28 职场文书
nginx优化的六点方法
2021/03/31 Servers
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
Nginx配置使用详解
2022/07/07 Servers