CSS文本溢出显示省略号

1. 单行文本溢出显示省略号

  css实现文本溢出显示省略号css实现文本溢出显示省略号css实现文本溢出显示省略号

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 300px;
  color: red
}

查看Demo

---

2. 多行文本溢出显示省略号

  css实现文本溢出显示省略号css实现文本溢出显示省略号css实现文本溢出显示省略号
    css实现文本溢出显示省略号css实现文本溢出显示省略号css实现文本溢出显示省略号

.ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  width: 300px;
  color: red
}

查看Demo
注：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box：必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient：必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
适用范围：

7a3902ade9e761c43e485851582fb7c4.png