CSS截取字符串省略号效果兼容浏览器

最新推荐文章于 2025-11-05 20:48:02 发布

原创最新推荐文章于 2025-11-05 20:48:02 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS实现字符串省略号效果的方法，并确保该效果能在不同浏览器中正常显示。通过设置特定的CSS样式，如限定宽度、隐藏溢出内容及使用text-overflow属性，可以实现在文本超出指定范围时自动添加省略号。

<!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.365css.cn/" title="欢迎光临www.365css.cn">中国中走过中国中走过中国中走过</a></li>

<li><a href="http://www.365css.cn/" title="CSS截取字符串省略号效果兼容浏览器">CSS截取字符串省略号效果兼容浏览器</a></li>

<li><a href="http://www.365css.cn/" title="CSS截取字符串省略号效果">CSS截取字符串省略号效果</a></li>

<li><a href="http://www.365css.cn/" title="欢迎光临www.365css.cn">欢迎光临www.365css.cn</a></li>

</ul>

</body>

</html>