拜托,css这样实现多行文本“展开收起” 超酷的好吧

5 篇文章 0 订阅

前言

2022.02.14的午后,我站在你家门口,再次遇见了你,他又来牵起你的手

无法言语,我是什么,这样傻傻的我怎么守护你

这次我静静哭了选择放弃,我好想好想把记忆折叠起

可惜,记忆不能像之前那个需求一样自由展开与折叠

前段时间接到一个需求,关于文字展开和收起的,走了很多路,踩了很多坑。

在这个夜深人静,想你想到泪流的时候,决定记录分享一下。

需求如下所述:

  1. 未满两行时

  2. 超过两行,少于7行时

未展开

展开

  1. 超过7行时

未展开

展开

就如上面所述,我倒是第一次做这种需求,于是就网上搜索下案例,然后就搜出下面这篇文章:

文章链接:https://juejin.cn/post/6963904955262435336#comment

点赞和评论都挺多的,于是就用他的方案来实现了。

但是后面发现有些问题,其实他的文章后面的评论区也有读者提出来了问题。

其实我觉得问题也不大,于是问哦下设计大佬

显然,就收到了拒绝。

被拒绝是十分正常不过的事情了,不过这比被发好人卡杀伤力少太多了,不信你听听:

“你真的挺好的,人也很优秀,但是配不上我”

这矫情的措辞结构

经历过的人会懂

可能是孤独让情绪变得脆弱,毫无头绪的我,开始寻求网友的帮助。

群里就有大佬提供了这个

https://codepen.io/xboxyan/pen/LYWpWzK

这个跟方法跟 上面介绍的那篇文章的方法差不多

不同点在于这个方法是利用div高度来限制文字显示的行数的。

上面文章里是利用-webkit-line-clamp来限制行数。

然后它的省略号也是在label按钮里模拟出来的。

上面文章里的方法的缺点上面已经说了,那么群里推荐的方法是否也能解决问题呢?

其实不行,本来在pc上看确实是没问题了,但是在安卓和ios看发现不太行。

发现在ios上限制7行的时候,显示除了7.5行,就是多了半行。或者 总有一个手机对不齐(我们要适配各种安卓机和低端ios)

虽说两个方法都有缺点,但是都有优点,于是结合两者的优点就进行了我的方案的实现。

我的方案

<div class="activity-desc-wrapper">
  <input
    type="checkbox"
    class="toggleInput"
    id="toggleInput"
    v-model="isUnFold"
  />
  <div class="activity-desc" ref="descBox" id="descBox">
    <label
      class="btn"
      for="toggleInput"
      v-if="isMoreThan2Line && (!isUnFold || isMoreThan7Line)"
      >{{ isUnFold ? '展开' : '收起' }}</label
    >
    概述文字概述文字概述文字概述文字概
    述文字概述文字概述文字概述文字概述文字概述文字
    <label
      class="btn-no-absolute"
      for="toggleInput"
      v-if="isUnFold && !isMoreThan7Line"
      >收起</label
    >
  </div>
</div>

首先,跟上面那篇文章里介绍的一样,用input来记录当前是展开还是收起状态,

不同点是我用了两个label按钮。

一个label是不用定位的,直接跟在文字的末尾。这种是作为文字超过两行,但是未超过七行,展开的状态。

前面的label则是绝对定位到文字盒子的末尾。作为 文字超过两行未展开,展开后文字超过七行的情况。

可以看下css的实现

.activity-desc-wrapper {
  display: flex;
  .toggleInput {
    display: none;
  }
  .toggleInput:checked + .activity-desc {
    -webkit-line-clamp: 7;
  }

  .activity-desc {
    padding: 0;
    position: relative;
    margin-top: 7px;
    font-size: 24px;
    font-weight: 400;
    color: #8a8f99;
    line-height: 1.2;

    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    .btn {
      position: absolute;
      padding: 0 3px 0 7px;
      font-weight: 400;
      bottom: 0px;
      right: 0;
      line-height: 1.2;
      font-size: 24px;
      color: #939fe1;
      background: #f5f7fa;
      &::before {
        content: '...';
        color: #8a8f99;
        transform: translateX(-100%);
      }
    }
    .btn-no-absolute {
      float: none;
      font-size: 24px;
      font-weight: 400;
      color: #939fe1;
    }
  }
}

我的方案的另一个重点在于判断文字是否超过2行和七行,这个就在于获取文字的实际高度是多少,一开始以为是没办法获取的,只能获取到省略后的文字高度,在随便调试了一下之后,发现scrollHeight属性就可以获取到盒子的实际高度了,

mounted() {
  // 判断文案实际行数
  this.$nextTick(() => {
    const height = this.$refs.descBox.scrollHeight;
    const lineHeight = +window
      .getComputedStyle(this.$refs.descBox)
      .lineHeight.match(/\d+\.*\d+/g)[0];
    this.isMoreThan7Line = height / lineHeight > 7;
    this.isMoreThan2Line = height / lineHeight > 2;
  });
},

完美,收获了一帮小迷妹。

总结

  1. 跟在文字后面的按钮可以不设置定位
  2. 处于文字行数末尾的按钮可以设置绝对定位然后
  3. 行数的判断可以用scrollHeight属性
  4. 利用伪元素来模拟省略号…

回忆起从前,我的心总是默默的等候

你曾经说你 想找一个依靠

等了好几天 等你的留言 却发现是空白一片

站在镜子前 是不是我的样子有点丑

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
实现多行文字展开收起,可以通过CSS和JavaScript来完成。 首先,利用CSS的text-overflow属性来控制文本的显示方式,当文本超出指定的显示范围时,可以将多余的文本隐藏起来,并用省略号来代替。 其次,使用JavaScript来实现展开收起的功能,当点击展开按钮时,将被隐藏的文本显示出来;当点击收起按钮时,将多余的文本隐藏起来。 以下是一个示例代码: HTML: ``` <div class="text-container"> <p class="text">这是一段需要展开收起文本,可以通过CSS和JavaScript来实现。</p> <button class="btn-expand">展开</button> <button class="btn-collapse">收起</button> </div> ``` CSS: ``` .text-container { position: relative; overflow: hidden; max-height: 100px; /* 设置文本的最大高度 */ } .text { margin: 0; padding: 0; line-height: 1.5; text-overflow: ellipsis; /* 超出文本范围时用省略号代替 */ white-space: nowrap; overflow: hidden; } .btn-expand, .btn-collapse { position: absolute; bottom: 0; right: 0; display: none; } .btn-expand { display: block; } .text-container.expanded .btn-expand { display: none; } .text-container.expanded .btn-collapse { display: block; } ``` JavaScript: ``` var textContainer = document.querySelector('.text-container'); var text = document.querySelector('.text'); var btnExpand = document.querySelector('.btn-expand'); var btnCollapse = document.querySelector('.btn-collapse'); btnExpand.addEventListener('click', function() { textContainer.classList.add('expanded'); }); btnCollapse.addEventListener('click', function() { textContainer.classList.remove('expanded'); }); ``` 以上代码实现了一个简单的多行文字展开收起的效果,可以根据实际需求进行调整。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值