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

本文目标：

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

问题：

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

    
    
    


    

       

            路遥《平凡的世界》，激励了无数的青年，鼓舞了无数人的心
       
       

           

               
超级开心果
               

                   
                   
                   45
               
               

                
                0
               
               
 2天前
               

           
       
    

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中

    
    
    
    


    

       

            路遥《平凡的世界》，激励了无数的青年，鼓舞了无数人的心
       
       

           

               
超级开心果
               

                   
                   
                   45
               
               

                
                0
               
               
 2天前
               

           
       
    

运行效果如下：

到此为止，我们就实现了全部的需求

总结：

1、学习了如何让文本带省略号显示，主要代码如下：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

希望本文能给大家带来一定的帮助，谢谢！！！

以上就是CSS3中text-overflow实现文章标题带省略号的显示效果（代码实例 ）的详细内容，更多请关注 第一PHP社区 其它相关文章！