CSS实现单行、多行文本溢出显示省略号（…）

最新推荐文章于 2025-08-12 16:33:58 发布

王海虎

最新推荐文章于 2025-08-12 16:33:58 发布

阅读量233

点赞数 3

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/xiaohu12685/article/details/80095811

本文介绍三种使用CSS实现文本溢出省略号效果的方法，包括单行和多行文本的处理技巧，适用于网页布局中对长文本的优雅展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：超出部分。。。

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

第二种：实现多行文本溢出显示。。。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

第三种：实现多行文本溢出显示。。。，并增加消失感

h1 {
    width: 300px;
    position: relative;
    overflow: hidden;
}
		
h1::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}