CSS省略号总结

发表于 分类于 阅读次数：

CSS省略号一直在用，而且用的比较多，这里做下总结，方便日后查用

CSS省略号可以说是前端开发必不可少的。其原理就是将溢出的字符进行覆盖，并通过css的省略号样式表进行填充。

另外的情况可能会用在多行之后添加省略号

参考这里，我这里摘录如下，国内可能有开发者打不开

单行CSS省略号

1
2
3
4
5
6
.ellipsis {
  width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

多行CSS省略号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.block-ellipsis {
  width: 300px;
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 43px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

这里注意下height的值和webkit-line-clamp的值