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

互联网 20-6-5

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

问题：

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

附加说明

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; }

思路分析

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

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

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

思路分析

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

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

所以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;  }

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

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

所以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; }

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

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

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

.fireicon{     padding-right:10px; }

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>

运行效果如下：