Css省略号样式(CSS控制字符宽度省略号效果兼容浏览器)

最新推荐文章于 2024-07-10 11:57:20 发布

_Ethan

最新推荐文章于 2024-07-10 11:57:20 发布

阅读量456

点赞数

分类专栏： css 文章标签： css 浏览器 xhtml firefox 公告 html

本文链接：https://blog.csdn.net/yuzifen/article/details/6742835

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

_Ethan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css省略号样式(CSS控制字符宽度省略号效果兼容浏览器)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> CSS控制字符宽度省略号效果兼容浏览器 * { margin: 0
复制链接

扫一扫