文本超出使用省略号代替

单行文本

// 需要考虑元素是否为块级元素
span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文本

span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 设置对其方式 */
  -webkit-box-orient: vertical; 
  /* 设置行数 */
  -webkit-line-clamp: 2;
}