超出行数 展开 取消

      <div class="wrapper">

        <input id="exp2" class="exp" type="checkbox" />

        <div class="text">

          <label class="btn" for="exp2"></label>

          浮动元素是如何定位的正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

          浮动元素是如何定位的正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

          浮动元素是如何定位的正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

        </div>

      </div>

.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;

}

.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: 'more'

}

.exp{

  display: none;

}

.exp:checked+.text{

  -webkit-line-clamp: 999;

}

.exp:checked+.text::after{

  visibility: hidden;

}

.exp:checked+.text .btn::before{

  content: 'up'

}

from:

CSS 实现多行文本“展开收起” - 掘金