css文本超出显示省略号

单行文本溢出

.singleline-ellipsis {
  overflow: hidden; // 文本长度超出限定宽度时，则隐藏超出内容
  white-space: nowrap; // 设置文本不换行，在一行显示
  text-overflow: ellipsis; // 当对象内文本溢出时显示省略标记（…） 注意：只有在设置了overflow:hidden和white-space:nowrap后text-overflow才能够生效的
}

多行文本溢出

.multiline-ellipsis {
  overflow: hidden; // 溢出隐藏
  word-break: break-all; // 如果文本为一段很长的英文，使用后能使一个单词能够在换行时进行拆分
  text-overflow: ellipsis; // 当对象内文本溢出时显示省略标记（…）
  display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 3; /* 控制显示的行数，表示展示X行后多余的缩略展示 */
  -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
}