关于带有 显现更多 按钮的多行文本截断思考
发布时间：2021-12-22 16:12:49 所属栏目：经验 来源：互联网
导读：刚好最近遇到这个小需求，记得很早之前都是用 JS 处理，毕竟那时候年少无知。 切换类的操作 可以用 Checked 伪类实现，成本会比较低一点，那么先来列一下功能要点： 多行文本截断，显示省略号 显示更多 按钮可以展开所有文本 展开文本后，按钮的文字变成 收
|
刚好最近遇到这个小需求，记得很早之前都是用 JS 处理，毕竟那时候年少无知。 切换类的操作 可以用 Checked 伪类实现，成本会比较低一点，那么先来列一下功能要点： 多行文本截断，显示省略号 "显示更多" 按钮可以展开所有文本 展开文本后，按钮的文字变成 "收起文本" 按钮的出现条件为当文本 被截断 时（如果你文本只有 一行 ，那就没必要显示了吧:sweat:） 疑问点： text-overflow: ellipsis 不支持多行 截断 。按钮文字切换， CSS 该如何切换文本? 按钮的出现条件又如何判断? 下面我将逐一讲解:balloon: 多行文本截断 假设现有的 HTML 结构如下： <div class="box"> <p>文本内容</p> </div> 如果需要单行 截断 ，一般的做法是： p { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 效果如下： 多行文本需要用到 line-clamp ，定义 被截断 文本的行数： p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } 效果如下： 按钮点击展示所有文本 现在 HTML 结构改造成如下： <div class="box"> <input type="checkbox" name="toggle" id="toggle" style="display: none;"> <p>文本内容</p> <label for="toggle">显示更多</label> </div> 监听按钮的点击行为则用文首说的 Checked 伪类： input[name="toggle"]:checked { & + p { -webkit-line-clamp: unset; } } 这样当用户点击（选中）的时候，将 展示 所有文本，未选中则 收起 文本： 按钮文字动态化 讲道理，当展示所有文本之后，按钮的文字应该要切换成 "收起文本" ， CSS 怎么修改文本啊，其实用伪元素的 content 就行了。 把 HTML 中的文字去掉，然后换成 CSS 控制： <label for="toggle"></label> label { &::after { content: "显示更多"; } } 同理可得： input[name="toggle"]:checked { & ~ label { &::after { content: "收起文本"; } } } 效果如下： 按钮样式丑的那就自己调一下咯:sweat: 按钮出现的条件 当文本少于 三行 时，按钮不应该出现，因为没必要： 出大问题，网上冲浪后，发现没有任何 伪类 可以判断文本是否 被截断 ，如果有，我们可以这样做： p { &:truncated { & + label { display: block; } } } label { display: none; } truncated 意思是 截断 的。 不过就算这样，也无法实现我们的需求，因为当你显示所有文本后，你的文本就没有 被截断 了，所以按钮会消失： 以上是依靠一段 JS 实现的 模拟效果 ，源码如下： let list = document.querySelectorAll("p"); let observer = new ResizeObserver(entries => { entries.forEach(item => { item.target.classList[item.target.scrollHeight > item.contentRect.height ? "add" : "remove"]("truncated"); }); }); list.forEach(p => { observer.observe(p); }); 原理就是 监听 文本元素的大小变化，然后动态增加 truncated 类名:joy: 所以，你的 CSS 中的 truncated 伪类应该改成 truncated 类:sweat: p { &.truncated { & + label { display: block; } } } 我们希望 切换 的时候，按钮一直都在，而不是文本没 被截断 的时候就不显示按钮，因此，我们不需要一直 监听 文本元素的大小改变，我们只需要一个初始值（文本初始化的时候到底有没有 被截断 ），也就是只监听一次！ entries.forEach(item => { //... 原来的代码 observer.unobserve(item.target); // 移除监听 }); 或者根本不需要用这个 API ，直接页面初始化的时候，遍历判断一遍就行拉！ let list = document.querySelectorAll("p"); list.forEach(item => { item.classList[item.scrollHeight > item.offsetHeight ? "add" : "remove"]("truncated"); }); 这样， P 元素在页面初始化的时候，会自动加上 truncated 类名，而按钮又可以一直显示： 扩展 比如你可以自定义按钮样式、在底部增加一个透明渐变的蒙层、切换时候的过渡效果:grin: 总结 checked 伪类是个好东西，能满足很多需求而不用写 JS ，因此凡是有关 切换类的操作 都可以考虑用它。 （编辑：南平站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读