css多行省略

• 仅用css实现多行省略

<div class = "flex">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>

.flex{
  width: 200px;
  max-height: 100px;
  overflow: hidden;
  word-wrap: break-word;
  position:relative;
}

.flex:before{
  text-align: right;
  width: 2em;
  height: 20px;
  content:'...';
  position: absolute;
  right:8px;
  bottom: 0;
  background: #fff;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

.flex:after{
  content: "";
  height: 1.2em;
  width: 1em;
  position: absolute;
  right: 5px;
  background-color: white;
}

学习自这个人的博客