纯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 ...
随机推荐
- 严重 [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.core.StandardContext.listenerStart Error configuring application listener of class com.titan.extend.SpringContextLoaderListener
08-Jun-2022 10:05:21.119 严重 [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.core.StandardConte ...
- 微信小程序：流程/步骤流/时间轴自定义组件
效果图: 1.首先在小程序components目录下新建一个名为step的文件夹,再建step组件名.结构如下. 直接上代码 step.wxml <view class="step&q ...
- @Async异步注解的使用
@Async 简介 使用spring快速开启异步执行服务的注解 应用场景 同步:同步就是整个处理过程顺序执行,当各个过程都执行完毕,并返回结果. 异步: 异步调用则是只是发送了调用的指令,调用者无需等 ...
- 上分之路 VP Codeforces Round #744 (Div. 3) ABDE
VP情况 4 / 8 AC: A,B,D,E1 60 minutes WA: C 4 127 +00:02 +00:28 -7 +00:58 +00:39 手速还在线 D pair排个 ...
- 【python】第二模块 步骤一 第二课、数据库表的相关操作
第二课.数据库表的相关操作 一.课程介绍 1.1 课程介绍 学习目标 管理逻辑库和数据表 创建.删除.修改逻辑库和数据表 了解常用的数据类型和约束 字符串.整数.浮点数.精确数字.日期.枚举.主要约束 ...
- 六、js创建页码器：分页、上一页下一页、省略页码
表格数据太多,需要做成分页.因此需要写一个页码器. 1,初始化页码 获取数据之后渲染页码器,页码器初始化,小于6页的全部展示,否则展示前四页,后面是省略号,最后展示尾页.默认选中第一页,禁用前一页的箭 ...
- 格式化 ceph osd 盘报错stderr: wipefs: error: /dev/sdc: probing initialization failed: Device or resource busy
1.格式化 ceph集群osd盘 出现设备繁忙,只能手动清空磁盘并重启 格式化:ceph-volume lvm zap /dev/sdc dd 手动清空磁盘:dd if=/dev/zero of=/d ...
- jq的用法
选择页面中的元素,得到jQuery实例对象 ID选择器$("#save") 类选择器$(".class") 标签选择器$("div") 复合 ...
- win 子系统导入centos7
之前在应用商店安装过ubuntu的,有钱的建议从商店购买 window配置 , 准备一个centos系统,我是从已有系统导出的,导出命令 tar -cvf ./centos.tar ./ --excl ...
- Node.js+Vue.js开发王者荣耀手机端官网
一.项目初始 1.工具安装和环境搭建 node.js.npm.mongodb 编辑器:VScode 2.项目初始化 项目分为三个部分,分别是移动端界面.后台管理界面和node.js开发的整体的服务端 ...