实现超出文本显示省略号

一、应用场景

项目中文字描述过多，但是空间有限，常常需要对溢出文本使用省略号代替。

二、功能实现

1、单行文本

内容只显示一行，超过一行的文本都用省略号代替

div {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

2、多行文本

超过n行才显示省略号，相比单行较为复杂

div {
  width: 200px;
  word-break: break-all; /* 指定触碰到边界一律换行，哪怕是一个单词 */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}