CSS 实现多行文本展开收起效果
时间:2021-07-30
本文章向大家介绍CSS 实现多行文本展开收起效果,主要包括CSS 实现多行文本展开收起效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最终实现效果:
本文主要实现重点:
- 如何实现
展开
和收起
切换按钮的文字环绕效果 - 如何实现多行文本溢出省略效果
- 如何实现
展开
和收起
的状态or文字切换
初始 html:
<div class="text"> <label class="btn">展开</label> <span> 但听得蹄声如雷,十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅, 里面玄色布衣,但见人似虎,马如龙,人既矫捷,马亦雄骏,每一匹马都是高头 长腿,通体黑毛,奔到近处,群雄眼前一亮,金光闪闪,却见每匹马的蹄铁竟然 是黄金打就。来者一共是一十九骑,人数虽不甚多,气势之壮,却似有如千军万 马一般,前面一十八骑奔到近处,拉马向两旁一分,最后一骑从中驰出</span> </div> <style> .text { width: 475px; border: aqua solid 1px; color: #333; font-size: 14px; } .btn { color: dodgerblue; cursor: pointer; } </style>
控制按钮文字环绕效果
一般展开、收起按钮都在文字的右下脚:
- 局右:
float: right
- 局下:
margin-top
但 margin
虽然可以将按钮局下,但它无法实现文字环绕效果,所以我们这里利用伪元素实现:
- 局右:
float: right
- 局下:
.text::before
局右
.text::before{ content: ''; float: right; }
局下
.text::before{ content: ''; float: right; width: 0; height: calc(100% - 20px); }
我们发现出现了高度塌陷( calc(100% - 20px)
无效)的问题:
由于包含块的高度没有显式指定,并且该元素不是绝对定位,则计算值伪 auto,auto * 100/100 = NaN
— CSS 世界
此时解决办法有:
- 设置显式的高度值:这里高度是动态的,没办法显式指定,所以此方法不可用❌
- 如果包含块的高度显式指定,则设置该元素为绝对定位:包含块的高度是动态的,没办法显式指定,所以此方法也不可用❌
- 在元素外边包一层具有包裹性又具有定位特性的标签:✅
这里包一层 flex 布局。因为在 flex 布局的子项中,可以通过百分比来计算变化高度,因此,这里需要给 .text
包裹一层,然后设置 display: flex
<div class="content"> <div class="text"> <label class="btn" for="exp">展开</label> <span> 但听得蹄声如雷,十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅, 里面玄色布衣,但见人似虎,马如龙,人既矫捷,马亦雄骏,每一匹马都是高头 长腿,通体黑毛,奔到近处,群雄眼前一亮,金光闪闪,却见每匹马的蹄铁竟然 是黄金打就。来者一共是一十九骑,人数虽不甚多,气势之壮,却似有如千军万 马一般,前面一十八骑奔到近处,拉马向两旁一分,最后一骑从中驰出</span> </div> </div>
<style> .content { display: flex; } .text::before{ content: ''; float: right; height: 100%; margin-bottom: -20px; } .btn { float: right; clear: both; margin-right: 8px; } </style>
多行文本溢出省略效果
多行文本(css)
.text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
-webkit-line-clamp: 3
(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。为了实现该效果,它需要组合其他的WebKit属性)display: -webkit-box
(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )-webkit-box-orient: vertical
(和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )overflow: hidden
(文本溢出限定的宽度就隐藏内容)text-overflow: ellipsis
(多行文本的情况下,用省略号“…”隐藏溢出范围的文本)
如何实现 展开
和 收起
的状态切换
使用 input type="checkbox"
控制展开与收起效果
<input type="checkbox" id="exp" /> <style> #exp { visibility: hidden; } #exp:checked+.text{ -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/ } </style>
但文字展开后控制按钮依然显示 展开
,应该显示 收起
才对
这里使用伪类生成技术,具体做法就是去除或者隐藏按钮里面的文字,采用伪元素生成
<label class="btn" for="exp"></label> <style> .btn::after{ content:'展开' } #exp:checked+.text .btn::after{ content:'收起' } </style>
最终,大功告成:
原文地址:https://www.cnblogs.com/niejunchan/p/15078198.html
- Kaggle大神带你上榜单Top2%:点击预测大赛纪实(下)
- WordPress主题后台选项开发框架 Options Framework 介绍
- vc++ 在程序中运行另一个程序的方法
- 为Options Framework主题后台框架添加后台侧边栏
- ClistCtrl用法及总结(由怎样隐藏ListCtrl列表头的排序小三角形这个bug学习到的知识)
- 弹出式模态窗体选择文本控件
- zookeeper 分布式锁服务
- QT Creator 快速入门教程 读书笔记(三)
- WordPress中添加自定义评论表情包的方法(附三套表情包下载)
- 使用新类型Nullable处理数据库表中null字段
- QT Creator 快速入门教程 读书笔记(二)
- 设计模式学习笔记-命令模式
- .com域名和.cn域名的介绍
- Windows安装和使用zookeeper
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- SAP CRM状态字段下拉列表里数据的填充原理
- SAP CRM订单状态管理的一些重要的数据库表
- Angular应用的依赖注入调试
- 给Angular应用增添搜索Search功能
- Angular应用一个创建场景的问题分析
- WPF 最简逻辑实现多指顺滑的笔迹书写
- WPF 如何确定应用程序开启了 Pointer 触摸消息的支持
- Hexo-Matery主题美化
- uniapp onPullDownRefresh 下拉刷新小坑
- Windows服务器常用配置
- SAP CRM订单数据库表CRMD_SHIPPING的填充原理
- 使用art-template模板引擎渲染数据
- SAP CRM索引数据库表CRMD_ORDER_INDEX的更新原理
- 将自己的nodeJS项目分享到npm上
- react中使用prop-types检测props数据类型