CSS实现超过固定高度后出现展开折叠按钮

原理

原理就是利用浮动，可以参考作者的原文，我就不搬运了。

实现

最终的效果：https://code.wubin.work/code/css/CSS实现超过固定高度后出现展开折叠按钮.html

根据前面的 demo 原型，可以改造成以下结构

<div class="content">
  <pre class="text">
        很多内容...
        很多内容...
  </pre>
  <label for="c1" class="btn"></label>
</div>

这里.text就相当于B，.btn就相当于C，至于A完全可以用伪元素::before来代替

由于有点击切换的交互，所以需要用到input checkbox，和label关联起来，所以结构最终改造成这样

<div class="section">
  <input class="content-check" type="checkbox" id="c1" hidden>
  <div class="content">
    <pre class="text">
        很多内容...
        很多内容...
        </pre>
    <label for="c1" class="btn"></label>
  </div>
</div>

然后加点样式美化一下吧，由于原理和前面是完全一致的，这里就不重复展示具体细节了

.content{
  width: 400px;
  max-height: 200px;
  overflow: hidden;
  border-radius: 4px;
  outline: 2px dashed royalblue;
}
.section{
  display: flex;
}
pre{
  white-space: pre-wrap;
}
.content::before{
  content: '';
  width: 100px;
  height: 100%;
  float: left;
}
.btn{
  float: right;
  width: 100px;
  text-align: center;
  position: relative;
  left: calc(50% - 50px);
  transform: translateY(-100%);
  cursor: pointer;
}
.btn::after{
  content: '';
  display: block;
  height: 34px;
  background-color: #666;
  transition: .2s background-color;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'%3E%3C/path%3E %3C/svg%3E") center/ 24px 24px no-repeat;
}
.btn:hover::after{
  background-color: royalblue;
}
.btn::before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
}
.text{
  box-sizing: border-box;
  width: 100%;
  padding: 10px 15px;
  float: right;
  line-height: 1.5;
  margin: 0;
  margin-left: -100px;
  font-size: 18px;
  color: #232323;
}

然后是点击切换效果，可以用:checked来控制

.content-check:checked+.content{
  max-height: fit-content;
}
.content-check:checked+.content .btn{
  left: auto;
  right: calc(50% - 50px);
}
.content-check:checked+.content .btn::after{
  transform: scaleY(-1);
}

这样就可以控制不同的状态了。还可以加点遮罩，让点击处有一种淡出弱化的效果，表示别急，下面还有内容

.text{
 	/* */
  -webkit-mask: linear-gradient(red 150px, transparent 200px);
}

在线完整demo：

最后总结一下

想不到浮动布局还能实现这样的功能，总的来说，这是一种成本低廉但需要点想象力的实现方式，适应性和兼容性也都不错，下面总结一下

1. 布局有很多种，浮动布局比较特殊
2. 浮动布局非常脆弱，细小的尺寸都能引起整个布局的坍塌
3. 超过指定高度后，由于浮动布局引起的坍塌，正好可以区分两种情况
4. 通过改变按钮本身的相对位置，可以让案例在超出指定高度后才可见
5. 点击切换可以用input:check和label相关联实现
6. 淡出弱化效果可以添加一层蒙版mask，表示下面还有内容

相关资料