CSS 中实现文本溢出省略号可以用 text-overflow 属性，这个属性有个 ellipsis 值，专门为此而设计；此篇文章对此属性的用法做了测试，并解答其常见的坑和特点。
从下面的代码开始：
<style>
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
font-size: 28px;
}
</style>
<div>这是一段测试文本，这是一段测试文本。</div>
<span>这是一段测试文本，这是一段测试文本。</span>
效果图如下：
使用此属性需要同时具有 overflow: hidden 属性，而且要不被默认的换行所影响，所以此处指定了强制不换行；div 后面的 span 元素没有进行省略，由此可见，text-overflow: ellipsis 属性不对行内元素有用。
然后下面是使用自定义颜色，改变省略号的颜色：
<div style="color: green;">
<span style="color: red;">这是一段测试文本，这是一段测试文本。</span>
</div>
<div style="color: blue;">
<div style="color: green;">
<span style="color: red;">这是一段测试文本，这是一段测试文本。</span>
</div>
</div>
效果图如下：
你可能会觉得很奇怪，div 包裹 span 元素时，省略号用的是父级 div 元素的颜色，但是多个 div 元素嵌套时仍然是用的第一个父级 div 元素的颜色，其实这个特点如果结合前面的来看也不难理解，因为这个省略号不会对行内元素有用，所以它实际上不属于里面的 span 元素，而是属于最里面的 div 元素，这提醒了我们应注意在使用中要确保元素的绘制类型合理，像这种情况，我们可以使 span 绘制成块级元素来实现我们想要的效果，比如：
<style>
span {
display: block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
font-size: 28px;
}
</style>
据权威文档的描述，此属性原本支持两个值，用于不同文本方向的情况，但实际上这并不被现在的主流浏览器所支持，不过对于文本方向的支持倒是可以的：
<style>
span {
display: block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
font-size: 28px;
}
.SPAN_rtl {
direction: rtl;
}
.SPAN_double {
text-overflow: ellipsis ellipsis;
}
</style>
<span class="SPAN_rtl">这是一段测试文本，这是一段测试文本。</span>
<span class="SPAN_double">这是一段测试文本，这是一段测试文本。</span>
效果图：
上面都是禁止了换行，只有一行文本的情况，最后来看看对于多行文本溢出省略的处理方式：
<style>
p {
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
font-size: 28px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
<p>
这是多行文本 1 的测试<br />
这是多行文本 2 的测试<br />
这是多行文本 3 的测试<br />
这是多行文本 4 的测试
</p>
p 元素默认就是块级元素，所以不需要再额外指定；这里用到了 -webkit- 前缀的属性和值，意思是使其绘制成 -webkit-box 类型元素，-webkit-line-clamp 指定了行列数，-webkit-box-orient 指定了内容布局的方向，连起来的意思就是把 p 元素绘制成最多 3 行的块容器，结合前面的溢出省略号，那么超出 3 行的内容就会被隐藏，效果如下：
提示：如果你把 p 元素里的额外属性去掉，使其与 div 的样式相同，你会发现每一行后面都会有省略号。
浏览器环境：5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36 Edg/137.0.0.0