纯css实现多行文本展开收起

提到 CSS 状态切换，大家都能想到 input type=“checkbox” 吧。这里我们也需要用到这个特性，首先加一个 input，然后把之前的 button 换成 label ，并且通过 for 属性关联起来！

<div class="wrap">
  <input type="checkbox" id="exp">
  <div class="text">
    <label class="btn" for="exp">展开</label>
    浮动元素是如何定位的
  正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
  </div>
</div>

这样，在点击 label 的时候，实际上是点击了 input 元素，现在来添加两种状态，分别是只显示 3 行和不做行数限制

.exp:checked+.text{
    
    
  -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
}

兼容版本可以直接设置最大高度 max-height 为一个较大的值，或者直接设置为 none

.exp:checked+.text{
    
    
  max-height: none;
}

这里还有一个小问题，“展开”按钮在点击后应该变成“收起”，如何修改呢？
有一个技巧，凡是碰到需要动态修改内容的，都可以使用伪类 content 生成技术，具体做法就是去除或者隐藏按钮里面的文字，采用伪元素生成！

<label class="btn" for="exp"></label><!--去除按钮文字-->

.btn::after{
    
    
  content:'展开' /*采用content生成*/
}

添加 :checked 状态

.exp:checked+.text .btn::after{
    
    
  content:'收起'
}

兼容版本由于前面的省略号是模拟出来的，不能自动隐藏，所以需要额外来处理

.exp:checked+.text .btn::before {
    
    
    visibility: hidden; /*在展开状态下隐藏省略号*/
}

查看完整代码及体验效果【codepen多行展示收起】