CSS实现文本超过部分，超出两行，超出部分省略号显示

最新推荐文章于 2025-05-10 08:49:01 发布

xiaoma121212

最新推荐文章于 2025-05-10 08:49:01 发布

阅读量2.3k

点赞数

分类专栏： CSS 文章标签： css

原文链接：https://blog.youkuaiyun.com/weixin_43076899/article/details/88565619?ops_request_misc=&request_id=&biz_id=102&utm_source=distribute.pc_search_result.none-task-blog-SOBAIDUWEB-1

版权

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用CSS实现文本超出容器宽度时显示省略号的效果，包括单行和多行文本的处理方法。

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

文字超过部分显示为省略号

<style>
.p{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<body>
    <p class="p">
        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
    </p>
</body>

文本超出两行，超出部分省略号显示

<style>
.p{
    width: 200px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
</style>
<body>
    <p class="p">
        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
    </p>
</body>

原文链接：https://blog.youkuaiyun.com/weixin_43076899/article/details/88565619?ops_request_misc=&request_id=&biz_id=102&utm_source=distribute.pc_search_result.none-task-blog-SOBAIDUWEB-1 ，侵删!