拜托，css這樣實(shí)現(xiàn)多行文本“展開收起” 超酷的好吧

前言

2022.02.14的午后，我站在你家門口，再次遇見了你，他又來牽起你的手

無法言語，我是什么，這樣傻傻的我怎么守護(hù)你

這次我靜靜哭了選擇放棄，我好想好想把記憶折疊起

可惜，記憶不能像之前那個(gè)需求一樣自由展開與折疊

前段時(shí)間接到一個(gè)需求，關(guān)于文字展開和收起的，走了很多路,踩了很多坑。

在這個(gè)夜深人靜，想你想到淚流的時(shí)候，決定記錄分享一下。

需求如下所述：

1. 「未滿兩行時(shí)」

2. 「超過兩行，少于7行時(shí)」

未展開

展開

3. 「超過7行時(shí)」

未展開

展開

就如上面所述，我倒是第一次做這種需求，于是就網(wǎng)上搜索下案例，然后就搜出下面這篇文章：

?

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

?

點(diǎn)贊和評(píng)論都挺多的，于是就用他的方案來實(shí)現(xiàn)了。

但是后面發(fā)現(xiàn)有些問題，其實(shí)他的文章后面的評(píng)論區(qū)也有讀者提出來了問題。

其實(shí)我覺得問題也不大，于是問哦下設(shè)計(jì)大佬

顯然，就收到了拒絕。

被拒絕是十分正常不過的事情了，不過這比被發(fā)好人卡殺傷力少太多了，不信你聽聽：

"你真的挺好的，人也很優(yōu)秀，但是配不上我"

這矯情的措辭結(jié)構(gòu)

經(jīng)歷過的人會(huì)懂

可能是孤獨(dú)讓情緒變得脆弱，毫無頭緒的我，開始尋求網(wǎng)友的幫助。

群里就有大佬提供了這個(gè)

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

這個(gè)跟方法跟 上面介紹的那篇文章的方法差不多

不同點(diǎn)在于這個(gè)方法是利用div高度來限制文字顯示的行數(shù)的。

上面文章里是利用-webkit-line-clamp來限制行數(shù)。

然后它的省略號(hào)也是在label按鈕里模擬出來的。

上面文章里的方法的缺點(diǎn)上面已經(jīng)說了，那么群里推薦的方法是否也能解決問題呢？

其實(shí)不行，本來在pc上看確實(shí)是沒問題了，但是在安卓和ios看發(fā)現(xiàn)不太行。

發(fā)現(xiàn)在ios上限制7行的時(shí)候，顯示除了7.5行，就是多了半行?；蛘?總有一個(gè)手機(jī)對(duì)不齊（我們要適配各種安卓機(jī)和低端ios）

雖說兩個(gè)方法都有缺點(diǎn)，但是都有優(yōu)點(diǎn)，于是結(jié)合兩者的優(yōu)點(diǎn)就進(jìn)行了我的方案的實(shí)現(xiàn)。

我的方案

<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來記錄當(dāng)前是展開還是收起狀態(tài)，

不同點(diǎn)是我用了兩個(gè)label按鈕。

一個(gè)label是不用定位的，直接跟在文字的末尾。這種是作為文字超過兩行，但是未超過七行，展開的狀態(tài)。

前面的label則是絕對(duì)定位到文字盒子的末尾。作為 文字超過兩行未展開，展開后文字超過七行的情況。

可以看下css的實(shí)現(xiàn)

.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;
    }
  }
}

我的方案的另一個(gè)重點(diǎn)在于「判斷文字是否超過2行和七行」，這個(gè)就在于獲取文字的實(shí)際高度是多少，一開始以為是沒辦法獲取的，只能獲取到省略后的文字高度，在隨便調(diào)試了一下之后，發(fā)現(xiàn)「scrollHeight」屬性就可以獲取到盒子的實(shí)際高度了，

mounted() {
  // 判斷文案實(shí)際行數(shù)
  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;
  });
},

完美，收獲了一幫小迷妹。

總結(jié)

1. 跟在文字后面的按鈕可以不設(shè)置定位
2. 處于文字行數(shù)末尾的按鈕可以設(shè)置絕對(duì)定位然后
3. 行數(shù)的判斷可以用scrollHeight屬性
4. 利用偽元素來模擬省略號(hào)...

回憶起從前，我的心總是默默的等候

你曾經(jīng)說你 想找一個(gè)依靠

等了好幾天 等你的留言 卻發(fā)現(xiàn)是空白一片

站在鏡子前 是不是我的樣子有點(diǎn)丑