需求:一段文字,当收起的时候,显示4行,并且多余4行的部分用省略号表示,关键是在省略号前面留有空白部分来放一些图标等东西;展开的时候,全部显示。

例如下面的示例图:

收起的时候:

展开的时候:

在不用JS的情况下,如何能只用CSS就做到呢?

(一)先看下html结构

<div class="summary" data-content="天空为什么是蓝色×××"><p class="content">天空为什么是蓝色×××</p></div>

(二)再看下神奇的css

html,body,p{margin:;padding:}
.summary{
position: relative;
overflow: hidden;
margin-bottom: 5px;
line-height: 22px;
word-break: break-all;
text-indent:5em;
}
.packup p{
height: 90px;
}
.packup:before{
display: block;
content: attr(data-content);
position: absolute;
z-index:;
left:;
top:;
height: 66px;//这里的高是3×22的结果,其中22是行高 ,3是4-1
width: 100%;
overflow: hidden;
color: #000;
background-color: #fff;
text-indent: 5em; }
.packup:after{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-line-clamp:;//4就是需要在收起的时候显示的行数
content: attr(data-content);
position: absolute;
left:;
top:;
width: 100%;
height: 100%;
text-indent: -4em;
padding-right: 3em;
color: #000;
background-color: #fff;
}

关键的思路就是:用before显示的3行文字盖在after的文字上(before有个背景色,并且height很重要);用after显示4行文字,并且after的右边padding-right一定的距离,使得省略号的右边能够空出一定的位置。

在收起的时候,给summary加上packup的class值;在展开的时候,去掉summary上的packup这个class值。就能够做到图例上的样子了。

巧妙利用before和after伪类实现文字的展开和收起的更多相关文章

  1. css伪类实现文字两侧划线效果

    css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...

  2. 利用:before和:after伪类制作类似微信对话框

    今天学到了怎么做一个小三角形,进而结合其他属性把类似微信对话框的图形做出来了. 先做出如下形状: .arrow { width: 30px; height:30px; border-width:20p ...

  3. 利用after和before伪元素在文字两边写横线

    示例: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 利用:before和:after伪类制作CSS3 圆形按钮 含demo

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...

  5. 利用after和before伪类实现chrome浏览器tab选项卡斜边纯css无图制作笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. css伪类:before及:after除了插入文字内容还能做点儿啥?画图

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11181416.html 1.什么时候用伪类:before和:after? 结合实际开发情况,说一 ...

  7. CSS选择器之伪类选择器(元素)

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  8. 利用border和伪类画出三角形 ps:好久没写博客了。。。

    有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...

  9. 利用CSS hover伪类改变其他元素的总结

    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...

随机推荐

  1. TCP/IP 和 Socket 的关系

    要写网络程序就必须用Socket,这是程序员都知道的.而且,面试的时候,我们也会问对方会不会Socket编程?一般来说,很多人都会说,Socket编程基本就是listen,accept以及send,w ...

  2. linux常用命令-权限管理命令

    chmod  [{ugoa}{+-=}{rwx}] [文件或目录] [mode=421] [文件或目录] -R 递归修改 例:chmod g+w,o-r 文件或目录 但是一般用数字配置权限,例:chm ...

  3. python file

    >>> help(open) Help on built-in function open in module __builtin__: open(...) open(name[, ...

  4. 解决ThinkPHP Call to a member function assign() on a non-object

    <ignore_js_op> assign是tp模板输出变量的一个方法.没有object只能说没实例化...<ignore_js_op> 经过几番思索,终于发现了.原来是Act ...

  5. C# mongodb 驱动操作(Z)

    Query.All("name", "a", "b");//通过多个元素来匹配数组 Query.And(Query.EQ("nam ...

  6. Angular2 指令

      1. 指令说明 Angular2 指令是构成Angular2应用程序的重要组成部分,指令主要用来对模板的标签或者元素附加一些新的特性或者功能,改变一个 DOM 元素的外观或行为,Angular2指 ...

  7. 一行实现QQ群组头像,微信群组,圆角等效果. 并支持url直接加载图片

    说点题外话. Coding中我们总是经历着这么几个过程. 学会使用: 不管是API也好, 开源库也好. 总是在最开始的学会去用. 了解实现原理: 可能会因为一些不兼容, 代码的异常状态的处理不够完美等 ...

  8. MediaElement.js之浏览器跨域请求视频播放

    浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...

  9. 【Java EE 学习 46】【Hibernate学习第三天】【多对多关系映射】

    一.多对多关系概述 以学生和课程之间的关系为例. 1.在多对多关系中涉及到的表有三张,两张实体表,一张专门用于维护关系的表. 2.多对多关系中两个实体类中应当分别添加对方的Set集合的属性,并提供se ...

  10. Linux 第05天

    Linux 第05天 1.连接到Internet 1.1 配置网络信息 dmesg命令————查看网卡信息 dmesg | grep -i net ifconfig命令————查看IP.网关等相关信息 ...