纯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 ...
随机推荐
- 进入容器后不显示id
https://www.656463.com/wenda/dockerexejrrqbxsrqID_493 net=host的原因
- AirSim 自动驾驶仿真 (2-3) python控制无人机 win10
1首先搭建好环境 参考 2 python控制 https://blog.csdn.net/Zhaoxi_Li/article/details/108002544 官方代码位置 自己pythonj教程 ...
- Unity 2D 记录
Unity 2D 记录 1. 环境配置 1.1 下载安装unity hub和vs code 搜索unity hub 进行下载 https://unity.com/download 安装vs code ...
- howork7
" 形式化方法 阅读了解形式化方法形式化方法|形式化方法对软件开发的挑战:历史与发展 根据表达能力,形式化方法可以分为五类: 1)基于模型的方法:通过明确定义状态和操作来建立一个系统模型 ...
- sync同步工具使用
sync详解 sync概述: rsync是一个提供快速增量文件传输的开源工具.rsync在GNU通用公共许可证下免费提供,目前由Wayne Davison维护.传输前进行压缩,适合做备份使用. 命令格 ...
- requests模块之post请求传参json和data区别
post请求参数到底是传data还是json,此时要看请求头里的content-type类型 请求头中content-type为application/json, 为json形式,post请求使用js ...
- 尝试改善科研V2
参考链接: https://fulequn.github.io/2022/09/26/Article202209261/ https://www.xljsci.com/ https://apps.an ...
- Activity基础知识
Activity 一.Activity是什么 Activity是一种可以包含用户界面的组件,主要用于和用户进行交互.一个应用程序可以包含零个或多个活动. 二.活动的基本用法 1. 手动创建活动 打 ...
- CSS 常用样式-文本属性
文本类样式我们已经学习过颜色 color 属性,严格来说行高 line-height 也是文本类属性,由于其可以合写在 font 属性中个,暂时先归类到字体中学习,接下来还有几个常用的文本属性. 水平 ...
- Unity 转小游戏
填写appid 和游戏资源位置 在导出的项目里可以修改游戏资源位置 两个目录 minigame 是小程序打开的目录 webgl 是要下载的的资源 下载一个http 服务器就有了 和JS交互 大部分js ...