纯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 ...
随机推荐
- windows10安装ubuntu18.04（64位）双系统教程
系统安装教程链接:https://www.cnblogs.com/masbay/p/11627727.html 系统安装完成后安装显卡驱动:https://ywnz.com/linux/4573.ht ...
- centos8 安装 spdk
1. 下载 2.配置 ./configure --enable-debug --disable-tests --without-isal --without-ocf --with-uring --w ...
- C# net core 从文件流中获取文件头、匹配文件类型
常用文件的文件头如下: (以前六位为准) JPEG (jpg),文件头:FFD8FF PNG (png),文件头:89504E47 GIF (gif),文件头:47494638 TIFF (tif), ...
- Ai2022中文版(Illustrator 2022)Mac/win v26.4.1
Adobe Illustrator 2022 Mac/win是设计行业中的矢量图形经典.数以百万计的设计人员和艺术家使用行业标准的矢量图形软件创作各类内容,从炫酷的 Web 和移动图形,到徽标.图标. ...
- java注解-最通俗易懂的讲解
来源:秒懂,Java 注解 (Annotation)你可以这样学 Annotation 中文译过来就是注解.标释的意思,在 Java 中注解是一个很重要的知识点,但经常还是有点让新手不容易理解. 我个 ...
- Java基础知识题
在Java语言中,已知 a 为int 型,b 为 double型,c 为 float 型,d 为 char 型,则表达式 a+b*c-d/a 的 结果类型为(选一项)A.intB.doubleC.fl ...
- Qt使用API实现鼠标点击操作
前段时间,工作需要进行数据录入,每次都要点击3次按钮,想让鼠标自行点击,只要下位机接入,就自动点击按钮把数据读出,录入到服务端,并且进行检测,说干就干,没有经验,那只有面向百度编程. 根据查到的资料, ...
- C知识点
1.变量在内存中所占存储空间的首地址,称为该变量的地址:而变量在存储空间中存放的数据,即变量的值. C语言中,指针就是变量的地址.一个变量的值是另一个变量的地址,且变量类型相同,则称该变量为指针变量. ...
- AssetBuddle（一）
一·含义 一个压缩文件,针对于特定平台的资产压缩包.资产包括模型,贴图,预制体,音效,材质球等,注意不包括c#脚本. 二·作用 相对于resource文件夹下面的东西打包后定死只读,无法修改. AB包 ...
- 01-第一个Spring程序
1.导包 所有和spring有关的包(有mybatis包的忽略),后期会使用maven引入 2. 引入spring的配置文件 可命名为applicationContext-service.xml或sp ...