**一、对于单行文本**
处理单行文本溢出最常用的 CSS 属性组合为 `text-overflow` 和 `ellipsis` 配合 `white-space` 以及 `overflow:hidden;`
css
.single-line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
上述代码将会使得任何长度大于容器宽度的内容以“...”的形式被截断隐藏起来。例如：
html
<div class="single-line" style="width:200px;">
这是一段很长很长的单行文字示例。
</div>
**二、对多行文本**
然而，对于多行文本要实现类似效果并不直接支持简单的属性设置，需借助伪元素结合 `-webkit-box`, `-moz-box`, 或者更现代且广泛兼容的 `display:-webkit-flexbox;display:flex;` 等方法模拟达到目的。
一种跨浏览器较稳定方案如下：
HTML 结构：
html
<p class="multi-lines">
这里有一大段可能会有多行的文字描述，为了测试是否能在限制高度内正常展示省略号...
</p>
对应的CSS样式设定:
css
.multi-lines {
display: -webkit-box;
/* 支持旧版Webkit */
word-break: break-all;
-webkit-line-clamp: 3;
/*!* 设置最多显示几行 *!*/
-webkit-box-orient: vertical;
line-height: 1.5em;
height: 4.5em; /*!<-- 具体的高度值应根据你的line-height及预期最大行数计算得出 -->*/
overflow :hidden;
}
/* 对于Firefox等其他非WebKit内核浏览器可以尝试以下规则：*/
@supports not (-webkit-line-clamp) {
.multi-lines{
display: flex !important;/* 使用FlexBox模型 */
...
align-items: center;
justify-content: flex-start;
/* 此处可能仍需要配合JS动态调整height或者max-height以保持三行呈现 */
}
}
/* 并利用::before/::after创建自定义省略号 */
.multi-lines:before,
.multi-lines:after {
content:'…';
width: 1ch;
margin-right: 0.67em;
opacity: 0;
animation: dots steps(4,end) forwards infinite;
}
@keyframes dots {
to{opacity:1;margin-bottom:.9em;}
}
/* 当实际内容少于预设的最大行数时不显示省略号 */
.multi-lines:not(:hover)::before,.multi-lines:not(:hover)::after{
display:none!important;
}
以上CSS样式首先设置了`.multi-lines`类使其内部文字段落按垂直方向排列并且只允许显示指定数量的行(`-webkit-line-clamp`)，然后通过对`:before`和`:after`伪元素应用动画巧妙生成了连续滚动的省略号视觉特效。需要注意的是此解决方案主要针对基于WebKit渲染引擎的浏览器如Chrome/Safari有效，而对于Firefox和其他不支持 `-webkit-line-clamp` 的浏览器则可能需要用不同的策略甚至JavaScript辅助解决。
总结来说，无论是单行还是多行文本，我们都可以运用灵活而富有创意的CSS技术去达成理想的省略号截取功能，从而提升用户界面阅读体验的同时保证页面排布整洁有序。尽管在某些复杂情况下实施难度相对较大，但随着CSS新特性的不断涌现和完善，未来这一问题有望得到更加简便易用的标准解决方案。
标签： css文字省略号显示
