无论在移动端还是PC端，前端都有需要做文本文字的高度限制，因为经常后台给的数据是完整的。而前端就需要进行省略处理。接下来就给大家介绍几种css3文字溢出加省略号的方式。

我的实例效果是外层加一个盒子限制宽度加上描边和间距这样美化了，大家可以不用看。

.box {
  width: 200px;
  border: 1px solid #aaa;
  margin: 0 auto 20px;
  height: 80px;
  line-height: 20px;
  padding: 10px;
  font-size: 14px;
  border-radius: 3px;
}

1、单行文本溢出隐藏加省略号，代码如下：

.a1 {
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

2、多行文本溢出隐藏加省略号，代码如下：

.a2 {
  position: relative;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
}

3、单行+多行文本溢出隐藏，代码如下：

.a3 {
  height: 40px;
  position: relative;
  overflow: hidden;
}