css规定文本超出指定行数后，展示为...

css设置文本超出指定行数后，不进行换行，而是展示为…

.css

.el {
    width: 300px;
    margin-bottom: 50px;
    text-align: justify;
  }
   
  .el div:nth-of-type(2){
    border: 1px solid black;
    margin-top: 10px;
  }
  //关键代码
  .after {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }

  .one {
    //关键代码
    /*规定超出1行后展示为...*/
    -webkit-line-clamp: 1;
  }

  .two {
     //关键代码
     /*规定超出2行后展示为...*/
    -webkit-line-clamp: 2;
  }

.html

<div class="el">
    <div>before</div>
    <div class="before">这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
  </div>
  <div class="el">
    <div>after 1</div>
    <div class="after one">这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
  </div>
  <div class="el">
    <div>after 2</div>
    <div class="after two">这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
 </div>

效果如下