CSS3中text-overflow实现文章标题带省略号的显示效果（代码实例）-css教程-PHP中文网

本文目标：

1、掌握文本带省略号的显示效果

问题：

1、实现以下效果，要求使用纯DIV+CSS，不适用任何框架

实现效果图.png

附加说明

1、总体宽度是500px,在页面中居中显示

2、标题字体大小是22px,其他字体是16px

3、超级开心果作者的名称靠最左，时间2天前显示靠最右、

4、所有的小图标都是20px大小显示

5、标题全文是：路遥《平凡的世界》，激励了无数的青年，鼓舞了无数人的心

现在来具体操作

1、准备素材：根目录创建images文件夹，把相关素材图片都存放与此，素材有

2、创建好index.html，写好架构，架构如何分析呢

思路分析：

1、目标分成上下两个部分，第一个部分是一个大的标题，但是这个标题带省略号，说明他里面的文字超出了容器的最大宽度

2、下面部分是一个列表，列表显示从左到右依次是，作者名称，一个很火的标志，点赞数，留言数，还有文字的发表日期，按天数显示

根据分析，我们得出以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3文本带省略号实现案例</title>
</head>
<body>
    <div class="container">
       <div class="top">
            路遥《平凡的世界》，激励了无数的青年，鼓舞了无数人的心
       </div>
       <div class="bottom">
           <ul>
               <li><span class="text">超级开心果</span></li>
               <li class="zan">
                   <img src="images/fire.png" class="icon fireicon"/>
                   <img src="images/zan.png" class="icon zanicon"/>
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img src="images/msg.png" class="icon"/>
                <span class="text">0</span>
               </li>
               <li class="date"> <span class="text">2天前</span></li>
               <li class="clear"></li>
           </ul>
       </div>
    </div>
</body>
</html>

登录后复制

3、写样式

思路分析：

1、.container *

思路分析

1、为了设置容器里的所有元素的公共样式，我们可以将这些公共代码写入.container * 样式内

所以index.css中添加代码如下：

.container *{
    padding:0;
    margin: 0;
}

登录后复制

2、.container

思路分析

1、根据上述要求得知，width=500px,然后要求居中，所以转成代码即margin:0 auto;

所以index.css中添加代码如下：

.container{
    width: 500px;
    margin:0 auto;
}

登录后复制

3、.top

思路分析

1、根据上述要求得知，它的宽度是100%，然后标题要居中显示，即text-align: center;大小是22px即font-size: 22px;重点是如果标题长度过长，我们需要让它按照带省略号的方式显示所以这样一来我们需要这样写：

text-overflow:ellipsis; （当超出的时候带省略号）

overflow:hidden; （当超出的时候隐藏）

white-space:nowrap; （当超出的时候不换行）

2、上下两个div存在一定的间距，间距为22px，即margin-bottom: 20px;

所以index.css中添加代码如下：

.top{
    width: 100%;
    text-align: center;
    font-size: 22px;
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
    margin-bottom: 20px;
}

登录后复制

4、ul,li

根据效果得知，所有的li没有带有黑色圆点，所以list-style: none;而且是水平排列的，所以float: left;

所以index.css添加代码如下：

ul li{
    list-style: none;
    float: left;

}

登录后复制

5、 li.clear
因为li都是浮动的，所以最后一列要清除浮动,所以clear:both,float:none，且为了不影响布局li.clear的宽度和高度都要设置为0

所以index.css添加代码如下：

li.clear{
    clear: both;
    float: none;
    width:0;
    height:0;
}

登录后复制

6、li.zan

因为显示点赞信息所在的列，和第一列存在一定的左边距，和右边的列存在右边距，所以我们设置成margin-left:100px; margin-right:30px;

又因为还有一个灰色的竖线，我们可以将li的右边框显示出来，大小为1px，颜色为浅灰色，所以border-right: 1px solid lightgray;

所以index.css添加代码如下：

li.zan{
    margin-left:100px;
    margin-right:35px;
    border-right: 1px solid lightgray;
}

登录后复制

7、li.date

因为显示日期的li，需要显示到最右边，所以float:right

所以index.css添加代码如下：

li.date{
    float: right;
}

登录后复制

8、.icon

1、根据要求得知，width,height都是20px

所以index.css添加代码如下：

.icon{
    width:20px;
    height: 20px;
}

登录后复制

9、.fireicon

1、因为从结果来看，它和右边的元素存有右边距，所以我们可以写成padding-right:10px;

.fireicon{
    padding-right:10px;
}

登录后复制

10、.text

1、根据要求得知，颜色为灰色 color:gray,字体大小为16px 所以font-size:16px

所以index.css添加代码如下：

.text{
    color:gray;
    font-size: 16px;
}

登录后复制

到此为止，index.css的全部内容如下：

.container *{
    padding:0;
    margin: 0;
}
.container{
    width: 500px;
    margin:0 auto;
}
.top{
    width: 100%;
    text-align: center;
    font-size: 22px;
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
    margin-bottom: 20px;
}
ul li{
    list-style: none;
    float: left;

}
li.clear{
    clear: both;
    float: none;
    width:0;
    height:0;
}
li.zan{
    margin-left:100px;
    margin-right:35px;
    border-right: 1px solid lightgray;
}
li.date{
    float: right;
}

.icon{
    width:20px;
    height: 20px;
}
.fireicon{
    padding-right:10px;
}
.text{
    color:gray;
    font-size: 16px;
}

登录后复制

然后将index.css引入index.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3文本带省略号实现案例</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
       <div class="top">
            路遥《平凡的世界》，激励了无数的青年，鼓舞了无数人的心
       </div>
       <div class="bottom">
           <ul>
               <li><span class="text">超级开心果</span></li>
               <li class="zan">
                   <img src="images/fire.png" class="icon fireicon"/>
                   <img src="images/zan.png" class="icon zanicon"/>
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img src="images/msg.png" class="icon"/>
                <span class="text">0</span>
               </li>
               <li class="date"> <span class="text">2天前</span></li>
               <li class="clear"></li>
           </ul>
       </div>
    </div>
</body>
</html>

登录后复制

运行效果如下：