多行文本收缩展开（兼容版本）

多行文本收缩展开（兼容版本）

html代码示例

<div class="wrapper">
        <input type="checkbox" class="exp" id="exp1">
         <div style="white-space: pre-line; margin-left: 20px;" class="text">
          <label class="btn" for="exp1"></label>
           {{data.indicatorDesc }}
        </div>
  </div>
     

css代码示例

.wrapper {
  display: flex;
  overflow: hidden;
}
.text {
  text-overflow: ellipsis;
  text-align: justify;
  position: relative;
  line-height: 1.5;
  max-height: 1.8em;
  transition: .3s max-height;
}
.text::before {
  content: '';
  height: calc(100% - 26px);
  float: right;
}
.btn{
  position: relative;
  float: right;
  clear: both;
  margin-left: 20px;
  padding: 0 8px;
  background: #3F51B5;
  line-height: 22px;
  border-radius: 4px;
  color:  #fff;
  cursor: pointer;
}
.btn::after{
  content:'展开'
}
.exp{
  display: none;
}
.exp:checked+.text{
  max-height: none;
}
.exp:checked+.text::after{
  visibility: hidden;
}
.exp:checked+.text .btn::before{
  visibility: hidden;
}
.exp:checked+.text .btn::after{
  content:'收起'
}
.btn::before{
  content: '...';
  position: absolute;
  left: -5px;
  color: #333;
  transform: translateX(-100%)
}