CSS省略号总结

Thu, 10 Jul 2025 11:52:30 +0000

CSS省略号一直在用，而且用的比较多，这里做下总结，方便日后查用

CSS省略号可以说是前端开发必不可少的。其原理就是将溢出的字符进行覆盖，并通过css的省略号样式表进行填充。

另外的情况可能会用在多行之后添加省略号

参考这里，我这里摘录如下，国内可能有开发者打不开

单行CSS省略号

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

多行CSS省略号

.block-ellipsis {
 width: 300px;
 display: block;
 display: -webkit-box;
 max-width: 100%;
 height: 43px;
 margin: 0 auto;
 font-size: 14px;
 line-height: 1;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
 text-overflow: ellipsis;
}

这里注意下height的值和webkit-line-clamp的值

省略号 on Dapeng Zhang

CSS省略号总结