需求:一段文字,当收起的时候,显示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. Linux下,如何给PHP安装pdo_mysql扩展

    下载了一个免费开源的广告系统(openadserver),在Linux上安装时,提示要安装 pdo_mysql 扩展,先前有过编译安装 soap扩展 的经历,今天要编译安装 pdo_mysql 扩展, ...

  2. js parseInt 显示0

    parseInt 有第二个参数, 就是进制参数 parseInt("08", 10);  //表示这个数字是十进制的就不会出错了.

  3. 获取FIle路径下所有文件的地址和名称

    public static void getFileName(File[] files) { String address=""; if (files != null)// 先判断 ...

  4. WCF service 获取 client 端的 IP 和 port (转)

    转帖记录一下,以便日后使用. 主要使用是.NET3.5里的服务端上下文的消息实例的RemoteEndpointMessageProperty属性,获取客户端地址信息.但是限制 的绑定是HTTP.TCP ...

  5. 4.EasyUI学习总结(四)——EasyUI组件使用 (通过用户登录来演示dialog、ajax的使用,serialize方法的使用,前后台怎样交互等)

    一.EasyUI组件的简单介绍 详细可看api: http://www.jeasyuicn.com/api/docTtml/index.htm easyUI提供了很多组件让我们使用,如下图所示: 很多 ...

  6. JavaScript和JQuery好书推荐

    其实无论你是php/python/java还是c/c++,只会自己那点知识是无法独立完成一个站点的建设的! 如果你因自己能力不足拒绝过几次亲友的建站请求,或者因合作中不了解前端是什么东西而失去过几次创 ...

  7. 问题:QXcbConnection: Could not connect to display

    Wkhtmltopdf 失败 (错误代码: -6). 消息: The switch --header-spacing, is not support using unpatched qt, and w ...

  8. 【XLL 框架库函数】 TempErr/TempErr12

    创建一个包含了 Excel 工作表错误的临时 XLOPER/XLOPER12 原型 LPXLOPER TempErr(WORD err); LPXLOPER12 TempErr12(BOOL err) ...

  9. myeclipse6.5注册机

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public ...

  10. 二、CoreAnimation之寄宿图详解

    在之前的图层树中我们知道,可以使用CALayer对象创建一些有背景颜色的图层,其实使用CALayer,不仅可以利用其展示背景颜色,还可以展示图片.而这些展示内容,其实就是CALayer的寄宿图.这一节 ...