纯CSS实现多很文本展开收起

常见方案

基础的css实现多行文本省略显示在工作中非常常见

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

但是很多时候会要求实现展开收起模块

就像这样：

纯CSS实现多很文本展开收起_f5

如图那种只要控制overflow状态就可实现

标准的固定高度的展开收起很好做，但是很多时候是按照文本行数来判断，同时要适应不同宽度的弹性布局，

这时候常见的方法是我们需要使用js去做判断，结合宽高字体大小通过计算配合v.substring(0, num)这种方法来手动进行省略

这样虽然可以实现同样的效果但还是不够优雅

找了很久终于找了阅文的一个案例，我们可以只通过css就可以实现这一效果

先上代码可以直接使用(此版本兼容主流浏览器) 查看效果点击这里

<div class="wrapper">
  <input id="exp1" class="exp" type="checkbox">
      <div class="text">
          <label class="btn" for="exp1"></label>
很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行、文本很多行 文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文
     </div>
</div>

.wrapper {
  display: flex;
  margin: 50px auto;
  min-width: 300px;
  overflow: hidden;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
.text {
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  /* display: flex; */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  position: relative;
}
.text::before {
  content: "";
  height: calc(100% - 24px);
  float: right;
}
.text::after {
  content: "";
  width: 999vw;
  height: 999vw;
  position: absolute;
  box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
  margin-left: -100px;
}
.btn {
  float: right;
  clear: both;
  margin-left: 10px;
  font-size: 16px;
  padding: 0 8px;
  background: #3f51b5;
  line-height: 24px;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  /* margin-top: -30px; */
}
.btn::before {
  content: "展开";
}
.exp {
  display: none;
}
.exp:checked + .text {
  -webkit-line-clamp: 999;
}
.exp:checked + .text::after {
  visibility: hidden;
}
.exp:checked + .text .btn::before {
  content: "收起";
}

它的核心要点在这里

  • 文本环绕效果首先考虑浮动 float
  • flex 布局子元素可以通过百分比计算高度
  • 多行文本截断还可以结合文本环绕效果用max-height模拟实现
  • 状态切换可以借助 checkbox
  • CSS 改变文本可以采用伪元素生成
  • 多利用 CSS 遮挡 “障眼法”

他的一个隐藏点就是如果背景色不纯就没法遮挡展开收起，古这种情况下需优先考虑纯色背景或者选择其他方式隐藏

如果只考虑谷歌浏览器不需要Safari和firefox的话还可以更简单些

.wrapper {
  display: flex;
  margin: 50px auto;
  width: 800px;
  overflow: hidden;
  border-radius: 8px;
  padding: 15px ;
  box-shadow: 20px 20px 60px #bebebe,
    -20px -20px 60px #ffffff;
}
.text {
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  /* display: flex; */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  position: relative;
}
.text::before {
  content: '';
  height: calc(100% - 24px);
  float: right;
}
.btn{
  float: right;
  clear: both;
  margin-left: 10px;
  font-size: 16px;
  padding: 0 8px;
  background: #3F51B5;
  line-height: 24px;
  border-radius: 4px;
  color:  #fff;
  cursor: pointer;
  border:0;
}
button{
  float: right;
  clear: both;
  margin-left: 10px;
}