单行文本超出一行显示省略号

 css 实现单行文本或者多行文本超出内容显示省略号。需要注意的一点是设置容器的宽度。

// 单行文本超出内容显示省略号
.ellipsis-text{
  white-space: nowrap;/*强制一行显示*/
  overflow:hidden;/*超出部分隐藏*/
  text-overflow: ellipsis;/*最后添加省略号*/
}


// 多长文本超出内容显示省略号
.ellipsis-text-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}