CSS写省略号

最新推荐文章于 2025-06-24 09:47:52 发布

涂作权的博客

最新推荐文章于 2025-06-24 09:47:52 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css xhtml firefox html

本文链接：https://blog.youkuaiyun.com/tototuzuoquan/article/details/7771921

前端专栏收录该内容

49 篇文章

订阅专栏

本文介绍如何使用CSS来实现省略号显示方法，包括样式定义和代码演示。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>css写省略号方法</title>

<style>

/* CSS DEMO */

* { 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: 220px;

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;

}

/* XHTML DEMO*/

</style>

</head>

<body>

<ul>

<li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>

<li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>

<li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>

<li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>

<li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>

<li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>

<li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>

</ul>