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

点击上方 蓝字 关注，回复" 1 "加入「前端交流群」

刚好最近遇到这个小需求，记得很早之前都是用 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;
}	

效果如下：