超出行数...隐藏并在最后一行最后加展开按钮

这篇博客介绍了一种不同于常规CSS超出行数隐藏的方法,需求是在最后一行添加展开按钮。作者通过模板、脚本和CSS三部分来阐述解决方案,强调了在CSS下无法直接实现,而采用了一种原始但易理解的处理方式。文章提供了拆分字符串、计算字符宽度等步骤,实现了保留换行的展开功能,并提到已将优化后的代码封装为组件,具体实现可在另一篇文章中查看。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 今天需求出现了一个与正常的超出行数隐藏并使用...展示不一样的地方。

一般来说正常的超出省略使用CSS就能解决

<p class="ellipsis">这是一段很长的文本,当它超过一行时将被隐藏并显示省略号。</p>

超出一行:
 

css
.ellipsis {
  display: inline-block; /* 设置为内联块级元素 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap; /* 不换行 */
  max-width: 100%; /* 最大宽度不超过父容器 */
}

超出行数自定义

.ellipsis {
  display: -webkit-box; /* 设置为块级元素 */
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  -webkit-box-orient: vertical; /* 设置为垂直方向布局 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: normal; /* 换行 */
}

我想了很多办法,我们在最后一行想加个按钮使用css是不行的,解决就只能使用最原始的、最好理解的方法:

templa

实现 CSS 文字超过两行显示省略号(`...`),在后面添展开/收起”按钮,需要结合 HTMLCSS 和 JavaScript 来完成。以下是完整的实现方案: --- ### ✅ 实现效果: - 默认只显示两行文字,超出部分用 `...` 表示; - 有一个“展开按钮,点击后显示全部内容; - 再次点击“收起”按钮,恢复为两行。 --- ### ✅ 示例代码 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多行文本截断 + 展开收起</title> <style> .text-container { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 控制显示几行 */ overflow: hidden; line-height: 1.5; max-height: 3em; /* 2行 * 行高 */ position: relative; margin-bottom: 10px; } .text-container.full { -webkit-line-clamp: unset; max-height: none; } .toggle-btn { color: blue; cursor: pointer; text-decoration: underline; } </style> </head> <body> <div id="text" class="text-container"> 这是一段很长的测试文本,我们希望它在超过两行时被截断,在末尾上一个展开按钮。当用户点击展开后,应该能看到完整的内容。 </div> <span class="toggle-btn" onclick="toggleText()">展开</span> <script> const container = document.getElementById('text'); let isExpanded = false; function toggleText() { isExpanded = !isExpanded; if (isExpanded) { container.classList.add('full'); document.querySelector('.toggle-btn').textContent = '收起'; } else { container.classList.remove('full'); document.querySelector('.toggle-btn').textContent = '展开'; } } </script> </body> </html> ``` --- ### ✅ 代码解释: #### CSS 部分: - 使用 `-webkit-line-clamp` 控制最多显示的行数; - 使用 `display: -webkit-box` 和 `-webkit-box-orient: vertical` 来支持多行省略; - `.text-container.full` 是展开状态下的样式,取消限制; - `max-height` 用于辅助控制高度,避免动画或布局问题。 #### JS 部分: - 通过切换类名 `.full` 来控制是否展开; - 点击按钮时切换 `isExpanded` 的布尔值更新按钮文字。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值