使用text-overflow截断超长文字显示技巧

最新推荐文章于 2025-05-07 20:02:09 发布

原创最新推荐文章于 2025-05-07 20:02:09 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用CSS的text-overflow属性结合overflow和display属性来优雅地截断显示超长文本，确保在不同浏览器中都能正常工作。重点讲解了-webkit-line-clamp和line-height的使用，以及对不支持这些特性的浏览器的兼容性解决方案。

使用text-overflow截断超长文字显示技巧


.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* 控制显示的行数 */
   line-height: X;        /* 对不支持浏览器的 */
   max-height: X*N;       /* 对不支持浏览器的弥补 */
}