网页制作

关于带有"显示更多"按钮的多行文本截断思考
网页制作 2024/12/22 佚名
3 2

刚好最近遇到这个小需求，记得很早之前都是用 JS 处理，毕竟那时候年少无知。 切换类的操作 可以用 Checked 伪类实现，成本会比较低一点，那么先来列一下功能要点：

  1. 多行文本截断，显示省略号
  2. "显示更多" 按钮可以展开所有文本
  3. 展开文本后，按钮的文字变成 "收起文本"
  4. 按钮的出现条件为当文本 被截断 时（如果你文本只有 一行 ，那就没必要显示了吧: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 ，因此凡是有关 切换类的操作 都可以考虑用它。

以上所述是小编给大家介绍的关于带有"显示更多"按钮的多行文本截断思考,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

标签：
显示更多,按钮,文本截断
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com