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

最新推荐文章于 2025-07-22 00:16:16 发布

kfcman

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： xhtml

本文链接：https://blog.youkuaiyun.com/kfcman/article/details/84410678

CSS 专栏收录该内容

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>