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

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

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

template部分

 <div
      ref="textContainer"
      class="content"
    >
      <span
        v-if="isTextOverflow && !showFullText"
        ref="textContent"
      >
        //被折叠的内容
        {{ collapseText }}
      </span>
      <span
        v-if="isTextOverflow && !showFullText"
        ref="viewMoreBtn"
        class="view-more-btn"
        @click="showFullText = true"
      >
        查看详情
        <img
          src="../../../../assets/images/right.svg"
          alt=""
        >
      </span>
        //完整内容//内容css使用white-space: pre-wrap;标签不能存在空格或回车
      <div v-if="!isTextOverflow || (isTextOverflow && showFullText)" class="full-text">{{ content }}</div>
      <div
        v-if="isTextOverflow && showFullText"
        class="retract-btn"
        @click="showFullText = false"
      >
        收起
      </div>
    </div>

 script部分

获取文本的宽度

注意：字体大小需按需求改变，不然算出总宽度出错

export const getTextWidth = (text) => {
  const body = document.querySelector('body');
  const span = document.createElement('span');
  span.style.opacity = 0;
  span.style.fontSize = '14px';
  span.innerText = text;
  span.style.whiteSpace = 'nowrap';
  body.appendChild(span);
  const width = span.offsetWidth;
  span.remove();
  return width;
};

  data () {
    return {
      collapseText: '',//折叠后的内容
      isTextOverflow: false,//是否超过行数
      showFullText: false,//是否打开折叠内容
    };
  },
  mounted () {
    this.textOverflow();
  },
  methods: {
    textOverflow () {
      //父盒子宽度
      const textContainerWidth = this.$refs.textContainer.offsetWidth;
      const charArray = this.articleItemData.content.replaceAll('\n', '').split('');
      let textContentWidth = 0;
      const isExceed = getTextWidth(this.articleItemData.content.replaceAll('\n', '')) > textContainerWidth * 3;
      if (isExceed) {
        for (let i = 0; i < charArray.length; i++) {
          textContentWidth += getTextWidth(charArray[i].replaceAll(' ', 'q'));
          //判断是否溢出三行
          if (textContentWidth >= (textContainerWidth * 3 - 200)) {
            this.isTextOverflow = true;
            this.collapseText = charArray.slice(0, i + 1).join('') + '...';
            break;
          }
        }
      } else {
        this.isTextOverflow = false;
        this.collapseText = this.articleItemData.content;
      }
    },
  },

CSS部分

.content {
  margin-bottom: 16px;
  font-size: 14px;
  color: #333;
  line-height: 22px;
  word-break: break-all;

  .full-text {
    white-space: pre-wrap;
  }

  .view-more-btn {
    color: #999;
    cursor: pointer;

    > img {
      margin-left: 4px;
      vertical-align: text-bottom;
    }
  }

  .retract-btn {
    cursor: pointer;
    margin-top: 8px;
    font-size: 14px;
    color: #999;
  }
}

由于本次项目着急，并没有封装次组件，temp部分可用插槽
代码可以按自己需求优化

                                            
if (textContentWidth >= (textContainerWidth * 需要折叠的行数 - 尾部查看详情按钮的宽度)) {
     this.collapseText = charArray.slice(0, i + 1).join('') + '...';
     this.isTextOverflow = true;
     break;
  }

实现方式就是拆分字符串成为数组，算出了每一个字符的宽度，并循环增加，算出每一行使用了多少字符，并截取字符串，再拼接起来。

具体实现后展示：

展开后：

 

代码已经优化成功，并且抽离成组件，具体代码在另一篇文章中查看封装超出行数...隐藏，展开保留换行_wang_fu_gui_ya的博客-优快云博客