开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

前言：

成功没有捷径但成长有路径

css必备场景。专注积累，每天记录一个知识点，老概念新理解，重点记录一下

每天梳理一个场景，知识点查漏补缺，充实满足。

正文

背景

又来了又来了，实现文本溢出的最后一篇文章，也是最有难度的一篇，带展开收起的多行省略。 需求是这样的，文案未满两行时正常显示，超过两行显示展开收起，这种交互主要难点主要有三个

1，显示省略号

2，展开收起的按钮状态切换

3，这个按钮要融入文本，挂在文字后面

展开/收起

实现

之前实现的几个需求场景都很简单，不管哪种都能实现，第一次做这个需求在网上找了找文档，点赞最高的是这篇CSS实现多行文本“展开收起”，还有这篇代码代码地址，但是收起的交互不太一样，在右下角，跟我们交互挂在文字末尾的要求不一样，各有优缺点

方案

我参考了上面的两种方式，综合以后最终我使用的方案是通过隐藏的形式，

1，省略号的实现，还是通过css多行省略的样式（用到之前的文章介绍过的js获取高度，判断是否需要省略）

.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  cursor: pointer;
}

2，展开，按钮的实现参考上面的文章，文字的行高是关键要确定的，通过float实现文本环绕，然后调整宽高定位到右下角。

3，收起，可以直接放在文章的末尾，因为出现在省略的情况下文字直接折叠的，收起按钮是看不到的，然后控制切换的时候两个按钮的显隐。

css代码

.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  cursor: pointer;
}
.content {
  line-height: 20px;
}
.text::before {
  content: '';
  float: right;
  width: 0;
  height: 20px;
}
.btn {
  float: right;
  clear: both;
}
.more-btn {
  margin-left: 4px;
  color: #006dff;
  cursor: pointer;
  &:hover {
    color: #ff8929;
  }
}

js代码

// 需要js判断一下是否需要展开收起
if (height > lineHeight * line) {
  setText0ver(true);
}

<div className={styles.content}>
  <div
    className={`${isCollapse ? styles.ellipsis : ''} ${styles.text}`}
    ref={target}
    style={{
      maxWidth: width,
      display: '-webkit-box',
      lineClamp: line,
      ...style,
    }}
  >
    {isCollapse && (
      <span
        className={`${styles.btn} ${styles.moțeBtn}`}
        onClick={() => {
          setIsCollapse(!isCollapse);
        }}
      >
        展开
      </span>
    )}
    {children}
    {!isCollapse && (
      <span
        className={styles.moreBtn}
        onClick={() => {
          setIsCollapse(!isCollapse);
        }}
      >
        收起
      </span>
    )}
  </div>
</div>