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

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

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

一般来说正常的超出省略使用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是不行的,解决就只能使用最原始的、最

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值