纯CSS3实现多行文本截断
纯CSS处理多行文本展开和收起，直接上代码和效果图
1 <html>
2 <header>
3 <style>
4 .wrap {
5 position: relative;
6 padding: 5px 25px 25px;
7 border-radius: 5px;
8 box-shadow: 0 5px 20px 3px #ccc;
9 }
10 .clamp {
11 overflow: hidden;
12 display: -webkit-box;
13 -webkit-line-clamp: 3;
14 -webkit-box-orient: vertical;
15 }
16 #state {
17 display: none;
18 }
19 #state:checked ~ p {
20 -webkit-line-clamp: 999;
21 }
22 #spread {
23 position: absolute;
24 right: 25px;
25 bottom: 10px;
26 background-color: dodgerblue;
27 font-size: 1rem;
28 line-height: 1.5rem;
29 padding: 0 5px;
30 color: #FFF;
31 border-radius: 3px;
32 }
33 #spread:hover {
34 cursor: pointer;
35 }
36 #spread::after {
37 content: "展开";
38 }
39 #spread::after {
40 content: "展开";
41 }
42 #state:checked + #spread::after {
43 content: "收起";
44 }
45 </style>
46 </header>
47 <body>
48 <div class="wrap">
49 <input type="checkbox" id="state"/>
50 <label for="state" id="spread"></label>
51 <p class="clamp text">
52 唧唧复唧唧，木兰当户织。不闻机杼声，唯闻女叹息。
53 问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。
54 东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边，不闻爷娘唤女声，但闻黄河流水鸣溅溅。旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。
55 万里赴戎机，关山度若飞。朔气传金柝，寒光照铁衣。将军百战死，壮士十年归。
56 归来见天子，天子坐明堂。策勋十二转，赏赐百千强。可汗问所欲，木兰不用尚书郎，愿驰千里足，送儿还故乡。
57 爷娘闻女来，出郭相扶将；阿姊闻妹来，当户理红妆；小弟闻姊来，磨刀霍霍向猪羊。开我东阁门，坐我西阁床，脱我战时袍，著我旧时裳。当窗理云鬓，对镜帖花黄。出门看火伴，火伴皆惊忙：同行十二年，不知木兰是女郎。
58 雄兔脚扑朔，雌兔眼迷离；双兔傍地走，安能辨我是雄雌？
59 </p>
60 </div>
61 </body>
62 </html>
默认效果：
展开效果：
纯CSS3实现多行文本截断的更多相关文章
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- 纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 纯CSS3实现多层云彩变换飞行动画
查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- 纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
- 纯CSS3实现动态火车行驶特效
上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
随机推荐
- fastdfs 上传成功后返回了错误URL,Request URL: http://localhost:8081/121.122.25.133/group1/M00/00/00/wKgZhV63.jpg
错误的URL. 原因: 图片服务器地址格式错误,fastdfs返回了错误的URL IMAGE_SERVER_URL = http:121.12.25.13/ 正确: IMAGE_SERVER_URL ...
- PHP Redis - List (列表)
Redis列表是简单的字符串列表,按照插入顺序排序. 一个列表最多可以包含 232-1 个元素 (4294967295, 每个列表超过40亿个元素) 插入元素在列表头部(lPush,Lpushx) ...
- IDEA移除Maven依赖的方法
参考地址:https://blog.csdn.net/weixin_45654405/article/details/124415010 方法一: 如果不行,则进行下一步: 尝试在project St ...
- kubctl
kubctl delete 命令:删除资源 根据yaml文件删除对应的资源,但是yaml文件并不会被删除,这样更加高效 delete 描述: 按文件名.stdin.资源和名称或按资源和标签选择器删除资 ...
- 20181224蒋嘉豪-exp4
20181224蒋嘉豪-exp4 目录 20181224蒋嘉豪-exp4 实验概况 1.实践目标 2.实践内容概述 知识点总结 1.有关schtasks 2.有关Sysmon(参考链接) 3.恶意代码 ...
- iview的表格 render
view的表格 render 先看一下效果图 效果题 代码如下 render render:(h,params)=>{} //h指dom对象,params指当前每一行数据(param ...
- binary与进制转换
精华笔记: 什么是二进制:逢2进1的计数规则.计算机中的变量/常量都是按照2进制来计算的 2进制: 规则:逢2进1 数字:0 1 基数:2 权:128 64 32 16 8 4 2 1 如何将2进制转 ...
- mybatis的xml中#{}和${}区别
#{}表示一个占位符号,通过#{}可以实现preparedStatement向占位符中设置值,自动进行java类型和jdbc类型转换,#{}可以有效防止sql注入.初步编译后的sql语句是" ...
- C# 自定义控件如何正确的继承父类
C# 自定义控件可以分为三类: 复合控件:基本控件组合而成.应当继承自 UserControl 扩展控件:继承基本控件,扩展一些属性和事件.比如继承 Button 自定义控件:直接继承自 Contro ...
- 深入理解Java内存（图解）
这篇文章是转自http://blog.csdn.net/shimiso/article/details/8595564博文. 本文分析基于jdk1.8 进入正题前首先要知道的是Java程序运行在JVM ...