CSS如何设置多行超出显示省略号

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 531

Author 回答者: shfshanyue

使用 -webkit-line-clamp 来设置多行超出显示省略号

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

Author 回答者: VaCameos

.box {
  width: 200px;
  word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

先设置宽度加上word-wrap属性达到换行的目的
利用-webkit-line-clamp限制行数利用overflow属性隐藏所省略

【Q517】CSS如何设置一行超出显示省略号【Q525】flex 布局中 order 有何作用