html多行文本展开更多,仅使用CSS实现带有“显示更多”按钮的多行截断文本
前几天,在办公室的讨论中出现了截断的文字,我想知道CSS是否能够实现该功能,能够正确地截断文本,即支持以下内容:
多行
“显示更多”按钮,点击时展开文本
text-overflow: ellipsis不支持多行,但是我记得可以使用 line-clamp属性来实现多行截断文本。
展开按钮
创建“show more”按钮需要一些开箱即用的CSS编程。我不能使用 or 因为这是一个臭名昭著的复选框的工作,这需要一个label元素和一个附带的…复选框!所以我得到了如下标记:
嘿,别那样打断我。我想表达我的想法,不喜欢被关在盒子里。
read more
因为我把复选框放在段落的正前方,我现在可以使用:checked pseudo类来切换截断,如下所示:
input:checked + p {
-webkit-line-clamp: unset;
}
实际上,这正是我想要的:单击按钮,段落在截断和未截断之间切换。
事实上,复选框hack不仅是hacky和语义问题,它也不是很容易访问,因为大多数只是天真display: none的复选框。这导致键盘导航中断,因为您无法选中隐藏的复选框,并且标签对标签没有帮助,因为空格/输入键不会将事件转发到像click事件那样的复选框(这使得感觉,就像在典型的表格上一样,你会选中复选框而不是标签)。
我想让我的例子和演示尽可能的容易访问,所以为了解决这个问题,我首先使复选框focusable/tabbable仍然是不可见的,就像这样:
input {
opacity: 0;
position: absolute;
pointer-events: none;
}
唯一剩下的问题是,我现在可以在复选框中键入,但我没有办法知道,没有一个屏幕阅读器,复选框是否聚焦或不……嗯……它是无形的。为了解决这个问题,我让标签收到一个(大致)浏览器默认焦点样式,而实际上复选框是集中的:
input:focus ~ label {
outline: -webkit-focus-ring-color auto 5px;
}
尝试单击按钮,并尝试用您的键盘tab到它,然后按下空格键!
如果我不知道文本是否被截断怎么办?如何动态显示按钮?
我试过要找出我能做什么,当段落中的任意文本太长而无法放入框中时动态显示按钮,否则隐藏它。不幸的是,这是我无法用CSS做的一个功能,因为它需要一个:truncated选择器,以便我们可以这样做:
.read-more { display: none; }
p:truncated + .read-more { display: block; }
其他人也有同样的想法,但从2014年开始的讨论没有取得任何进展。嘘!如果你真的需要这个功能,考虑使用JS,直到浏览器支持,像这样:
const ps = document.querySelectorAll('p');
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
entry.target.classList[entry.target.scrollHeight > entry.contentRect.height ? 'add' : 'remove']('truncated');
}
});
ps.forEach(p => {
observer.observe(p);
});
下面是使用JS助手和一个调整大小框(打开Codepenand调整浏览器窗口的大小来查看行为)的扩展演示
html多行文本展开更多,仅使用CSS实现带有“显示更多”按钮的多行截断文本相关推荐
- 多行文本展开收起(css)
纯css来实现多行文本展开收起的效果. 1.实现文本超出部分省略 单行文本: .text{width: 250px;overflow:hidden;text-overflow: ellipsis;wh ...
- java小程序显示多种按钮_微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能...
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多 收起 wxss .box ...
- vue 点击展开显示更多 点击收起部分隐藏
vue 点击展开显示更多 点击收起部分隐藏 要求: 只展示几条数据,其余的收起.点击显示更多时候,查看全部 如下:以百度云的页面为例 直接上代码: 1.html部分: <div><d ...
- win11右键显示更多选项关闭的四种方法
我们知道在新的Win11操作系统之中,微软为了美化界面,将右键菜单进行了整合更改,但是实用性却大幅度下降,引起了很多用户的反感,并迫切希望能够将Win11显示更多选项这个反人类的设置恢复成Win10的 ...
- Android编程之仿微信显示更多文字的View
微信朋友圈中,如果好友发表的文字过长,会自动收缩起来,底下有提示,当点击"显示更多"时才会展开. 首先定义布局文件(很简单,不解释): <?xml version=" ...
- vue 显示更多,收起功能
vue 显示更多,收起功能 标签显示更多收起功能 标签显示更多收起功能 第一种: 效果图: 合起来时: 展开时: 上代码: <div class="demo-input-suffix& ...
- 6个仅用 CSS 就能实现的有趣的功能
英文 | https://javascript.plainenglish.io/6-fun-things-you-can-do-with-css-1acabc8bf072 翻译 | 杨小爱 不管你喜欢 ...
- 深度学习应用篇-自然语言处理[10]:N-Gram、SimCSE介绍,更多技术:数据增强、智能标注、多分类算法、文本信息抽取、多模态信息抽取、模型压缩算法等
[深度学习入门到进阶]必看系列,含激活函数.优化策略.损失函数.模型调优.归一化算法.卷积模型.序列模型.预训练模型.对抗神经网络等 专栏详细介绍:[深度学习入门到进阶]必看系列,含激活函数.优化策略 ...
- jq循环遍历元素的高度,判断超出显示更多按钮
项目场景: jq循环遍历元素的高度,用于判断超出显示更多按钮然后点击展示全部,再次点击控制显示一行 问题描述: 第一步:jq循环遍历元素的高度: var divlist=$(".c-clas ...
最新文章
- 牛客算法周周练2 B Music Problem(DP,抽屉原理,二进制拆分)
- c 多线程运行混乱_一篇文章读懂 Python 多线程
- Quaternion.identity是什么意思?
- 敏捷开发本质 与 敏捷个人本质
- 路由器级联后网速慢的原因分析和问题解决
- [BZOJ2179]FFT快速傅立叶
- python将字典导入excel_python将字典列表导出为Excel文件的方法
- 2019\Province_C_C++_B\试题E-迷宫
- Java多线程:易失性变量,事前关联和内存一致性
- hdu 4267 多维树状数组
- 如何完成一次Apache的版本发布
- 【Office Word】论文排版有关技巧
- 项目兼容ie8技术要点
- lte和4g有什么区别
- 教之初考试系统登录选择服务器,教之初考试系统使用图解
- 巨头林立的音频赛道,喜马拉雅如何讲好资本故事?
- THinkphp教程网址
- springboo集成bboss-elasticsearch实现elasticsearch客户端
- jdk11压缩包下载
- Tmux 快捷键 速查表 简明教程