登录  /  注册
首页 > web前端 > css教程 > 正文

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

易达
发布: 2020-06-05 16:01:34
原创
1938人浏览过

本文目标:

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

问题:

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

实现效果图.png

附加说明

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

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

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

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

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

现在来具体操作

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

fire.png

msg.png

zan.png

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"/ alt="CSS3中text-overflow实现文章标题带省略号的显示效果(代码实例 )" >
                   <img  src="images/zan.png" class="icon zanicon"/ alt="CSS3中text-overflow实现文章标题带省略号的显示效果(代码实例 )" >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  src="images/msg.png" class="icon"/ alt="CSS3中text-overflow实现文章标题带省略号的显示效果(代码实例 )" >
                <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"/ alt="CSS3中text-overflow实现文章标题带省略号的显示效果(代码实例 )" >
                   <img  src="images/zan.png" class="icon zanicon"/ alt="CSS3中text-overflow实现文章标题带省略号的显示效果(代码实例 )" >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  src="images/msg.png" class="icon"/ alt="CSS3中text-overflow实现文章标题带省略号的显示效果(代码实例 )" >
                <span class="text">0</span>
               </li>
               <li class="date"> <span class="text">2天前</span></li>
               <li class="clear"></li>
           </ul>
       </div>
    </div>
</body>
</html>
登录后复制

运行效果如下:

11.png

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

总结:

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

text-overflow:ellipsis; 

overflow:hidden; 

white-space:nowrap; 

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

以上就是CSS3中text-overflow实现文章标题带省略号的显示效果(代码实例 )的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号