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

网页制作 2024/12/27 佚名

3 2 1

兼容浏览器的CSS控制字符宽度省略号效果，是非常实用的，由于FF对溢出显示省略号的属性支持不好。因而在进行编码时，应用到了一个HACK和FF的私有属性，大家在学习时注意区别。
看下面的HTML代码：
<ul>
<li><a href="https://www.jb51.net/">使用CSS最佳习惯 </a></li>
<li><a href="https://www.jb51.net/">说说XHTML中的alt属性和title属性 </a></li>
<li><a href="https://www.jb51.net/">IE中伪类:hover的使用及BUG </a></li>
<li><a href="https://www.jb51.net/">52CSS公告</a></li>
</ul>
看CSS代码：
* { 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;}
查看最终运行效果：

<!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="https://www.jb51.net/">使用CSS最佳习惯 </a></li> <li><a href="https://www.jb51.net/">说说XHTML中的alt属性和title属性 </a></li> <li><a href="https://www.jb51.net/">IE中伪类:hover的使用及BUG </a></li> <li><a href="https://www.jb51.net/">52CSS公告</a></li> </ul> </body> </html>

提示：您可以先修改部分代码再运行

CSS,字符,宽度,省略号,浏览器

标签：

CSS,字符,宽度,省略号,浏览器

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

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

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

暂无“CSS 控制字符宽度省略号效果兼容浏览器”评论...

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

CSS,字符,宽度,省略号,浏览器

纯CSS实现的三级下拉菜单实现代码

不同浏览器的CSS Hack写法小结

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

更新动态

友情链接

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

CSS,字符,宽度,省略号,浏览器

纯CSS实现的三级下拉菜单实现代码

不同浏览器的CSS Hack写法小结

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

更新动态

友情链接

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

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