CSS3中text-overflow的使用方法-创新互联

本文以CSS3中text-overflow为例，为大家分析CSS3中text-overflow的使用方法。阅读完整文相信大家对CSS3中text-overflow的使用方法有了一定的认识。

创新互联专业为企业提供镇宁网站建设、镇宁做网站、镇宁网站设计、镇宁网站制作等企业网站建设、网页设计与制作、镇宁企业网站模板建站服务，10余年镇宁做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。问题：

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

CSS3中text-overflow的使用方法

附加说明

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

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

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

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

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

现在来具体操作

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

CSS3中text-overflow的使用方法

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>

运行效果如下：

CSS3中text-overflow的使用方法