如何使用 CSS 处理文字溢出省略号

text-overflow: ellipsis; 是一种 CSS 属性, 主要用于处理单行或者多行文本内容超出其显示区域时的情况。

当文本内容过长，超出其容器布局的宽度时，我们通常不希望文本直接溢出显示，而是希望通过更优雅的方式来处理。这时我们就可以使用 text-overflow: ellipsis; 这个属性来让溢出的文本显示为"...”。

具体如何使用呢？

CSS代码如下：

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

.my-element 是你要应用文本溢出省略的元素的类名。这段代码的含义是：

1. white-space: nowrap; 属性保证文本内容不会换行，而是呈现在同一行。
2. overflow: hidden; 这个属性会确保超出容器的部分被隐藏。
3. text-overflow: ellipsis; 这个属性表示如果文本内容溢出，就显示为 "..."。

需要注意的是，text-overflow: ellipsis; 默认只支持单行文本的溢出显示。对于多行文本溢出显示，需要借助其他属性或者一些hack方法，例如 '-webkit-line-clamp' 等。

对于多行文本使用 'text-overflow: ellipsis;' 的 CSS 如下：

css
.my-element{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样设置后，.my-element 中的内容如果超过两行，那么多出的文本将会被隐藏，并且以 "..." 显示。