当前位置: 主页>网站教程>CSS教程> CSS3中text-overflow实现文章标题带省去号的显示结果（代码实例

分享文章到：

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

发布时间：09/01 来源：未知浏览：关键词：

1、总体宽度是500px,在页面中居中显示；2、标题字体大小是22px,其他字体是16px；3、超级开心果作者的名称靠最左，工夫2天前显示靠最右；4、所有的小图标都是20px大小显示；5、标题全...

本文指标：

1、把握文本带省去号的显示结果

题目：

1、实现下列结果，请求运用纯DIV+CSS，不适用任何框架




    
    
    CSS3文本带省去号实现案例


    
       
            路遥《平庸的天下》，鼓励了无数的青年，鼓舞了无数人的心
       
       
           
               超级开心果
               
                   
                   
                   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中




    
    
    CSS3文本带省去号实现案例
    


    
       
            路遥《平庸的天下》，鼓励了无数的青年，鼓舞了无数人的心
       
       
           
               超级开心果
               
                   
                   
                   45
               
               
                
                0
               
                2天前