关于带有"显示更多"按钮的多行文本截断思考

恰好最近遇到这个小需求，记得很早以前都是用JS处理，毕竟那时候年少无知。切换类的操做能够用Checked伪类实现，成本会比较低一点，那么先来列一下功能要点：

1. 多行文本截断，显示省略号
2. "显示更多"按钮能够展开全部文本
3. 展开文本后，按钮的文字变成"收起文本"
4. 按钮的出现条件为当文本被截断时（若是你文本只有一行，那就不必显示了吧😓）

疑问点：text-overflow: ellipsis不支持多行截断。按钮文字切换，CSS该如何切换文本? 按钮的出现条件又如何判断? 下面我将逐一讲解🎈

多行文本截断

假设现有的HTML结构以下：

<div class="box">
  <p>文本内容</p>
</div>

若是须要单行截断，通常的作法是：

p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

效果以下：

多行文本须要用到line-clamp，定义被截断文本的行数：

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

效果以下：

按钮点击展现全部文本

如今HTML结构改形成以下：

<div class="box">
  <input type="checkbox" name="toggle" id="toggle" style="display: none;">
  <p>文本内容</p>
  <label for="toggle">显示更多</label>
</div>

监听按钮的点击行为则用文首说的Checked伪类：

input[name="toggle"]:checked {
 & + p {
   -webkit-line-clamp: unset;
 }
}

这样当用户点击（选中）的时候，将展现全部文本，未选中则收起文本：

按钮文字动态化

讲道理，当展现全部文本以后，按钮的文字应该要切换成"收起文本"，CSS怎么修改文本啊，其实用伪元素的content就好了。

把HTML中的文字去掉，而后换成CSS控制：

<label for="toggle"></label>

label {
  &::after {
    content: "显示更多";
  }
}

同理可得：

input[name="toggle"]:checked {
  & ~ label {
    &::after {
      content: "收起文本";
    }
  }
}

效果以下：

按钮样式丑的那就本身调一下咯😓

按钮出现的条件

当文本少于三行时，按钮不该该出现，由于不必：

出大问题，网上冲浪后，发现没有任何伪类能够判断文本是否被截断，若是有，咱们能够这样作：

p {
 &:truncated {
   & + label {
    display: block;
   }
 }   
}

label {
  display: none;
}

truncated意思是截断的。

不过就算这样，也没法实现咱们的需求，由于当你显示全部文本后，你的文本就没有被截断了，因此按钮会消失：

以上是依靠一段JS实现的模拟效果，源码以下：

let list = document.querySelectorAll("p");
let observer = new ResizeObserver(entries => {
  entries.forEach(item => {
    item.target.classList[item.target.scrollHeight > item.contentRect.height ? "add" : "remove"]("truncated");
  });
});

list.forEach(p => {
  observer.observe(p);
});

原理就是监听文本元素的大小变化，而后动态增长truncated类名😂

因此，你的CSS中的truncated伪类应该改为truncated类😓

p {
 &.truncated {
   & + label {
    display: block;
   }
 }   
}

咱们但愿切换的时候，按钮一直都在，而不是文本没被截断的时候就不显示按钮，所以，咱们不须要一直监听文本元素的大小改变，咱们只须要一个初始值（文本初始化的时候到底有没有被截断），也就是只监听一次！

entries.forEach(item => {
  //... 原来的代码
  
  observer.unobserve(item.target); // 移除监听
});

或者根本不须要用这个API，直接页面初始化的时候，遍历判断一遍就行拉！

let list = document.querySelectorAll("p");

list.forEach(item => {
  item.classList[item.scrollHeight > item.offsetHeight ? "add" : "remove"]("truncated");
});

这样，P元素在页面初始化的时候，会自动加上truncated类名，而按钮又能够一直显示：

扩展

好比你能够自定义按钮样式、在底部增长一个透明渐变的蒙层、切换时候的过渡效果😁

总结

checked伪类是个好东西，能知足不少需求而不用写JS，所以凡有关切换类的操做均可以考虑用它。若是你以为这篇文章不错，请别忘记点个赞跟关注哦~😊

交流

微信公众号「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，对了偶尔还会有互联网中的趣事趣闻🍻

关注公众号，回复"1"获取群聊二维码，一块儿学习、一块儿交流、一块儿摸鱼🌊