CSS省略号

CSS省略号，也被称为文本溢出省略号，是一种非常实用的CSS技术，可以在文本内容太长时自动将其缩短并添加省略号以表示截断的效果。

使用方法

单行文本省略号

使用CSS中的text-overflow属性可以实现单行文本的省略号，如下所示:

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

• white-space: nowrap告诉浏览器不要换行;
• overflow: hidden告诉浏览器隐藏超出元素大小的内容;
• text-overflow: ellipsis指定在文本内容溢出时显示省略号

多行文本省略号

单独使用text-overflow: ellipsis并不能实现多行文本的省略号。 如果要实现多行文本的省略号，可以配合使用一些其他的技巧。

使用webkit前缀属性

使用WebKit前缀的-webkit-line-clamp属性可以实现多行文本的省略号，如下所示:

.overflow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

• display: -webkit-box强制将元素呈现为弹性容器。
• -webkit-box-orient: vertical指定子元素的排列方向为垂直。
• -webkit-line-clamp: 3控制垂直方向上显示的行数。
• overflow: hidden告诉浏览器隐藏超出元素大小的内容;
• text-overflow: ellipsis指定在文本内容溢出时显示省略号

使用伪元素

使用伪元素::before和::after可以实现多行文本的省略号，如下所示:

.overflow {
  position: relative;
  line-height: 1.4em;
  max-height: 4.2em;
  overflow: hidden;
}
.overflow::before {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
}
.overflow::after {
  content: '';
  width: 1em;
  height: 1em;
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
}

• position: relative让伪元素相对于父元素进行定位。
• line-height: 1.4em指定每行文本的高度为1.4倍字体大小。
• max-height: 4.2em指定元素在超过3行时开始省略，（4.2em = 3 * 1.4em）。
• overflow: hidden告诉浏览器隐藏超出元素大小的内容;
• ::before创建一个伪元素，用于显示省略号。
• content: '...' 设置伪元素的内容为省略号。
• position: absolute将伪元素定位在容器的右下角。
• bottom: 0; right: 0将伪元素放在容器的右下角。
• ::after创建一个啥，用于覆盖容器底部省略号后半部分的内容。
• content: '' 设置伪元素内容为空字符串。
• width: 1em; height: 1em;设置伪元素的大小为1字体单位。
• position: absolute将伪元素定位在容器的右下角。
• bottom: 0; right: 0将伪元素放在容器的右下角。
• background: #fff; 将伪元素背景设置为容器背景颜色，覆盖文本内容。

浏览器支持度

单行文本省略号的支持度非常好，几乎所有现代浏览器都支持。

多行文本省略号的支持度就要差一些，其中使用-webkit-line-clamp的方法只支持WebKit内核的浏览器（如Chrome、Safari），并且存在一些兼容性问题。使用伪元素的方法虽然相对来说更稳定，但是需要在CSS中为每一个元素添加伪元素，比较麻烦。因此，需要在项目中根据实际情况选择合适的方法。

结论

CSS省略号是一个非常实用的Web技术，可以在文本内容过长时自动将其缩短并添加省略号，从而提高页面的美观性和可读性。但是在实际开发中，需要根据具体情况选择合适的方法，并且需要注意兼容性问题。