css行内标题，内容溢出省略号表示

最新推荐文章于 2023-08-05 09:27:14 发布

原创最新推荐文章于 2023-08-05 09:27:14 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 同时被 2 个专栏收录

14 篇文章

订阅专栏

CSS3

7 篇文章

订阅专栏

本文介绍如何使用CSS实现文本溢出时的省略显示效果，包括单行及多行文本的处理方法。通过不同样式设置，可以有效管理页面布局中文字显示长度，保持良好的视觉体验。

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

/*自动隐藏文字*/=====1行
.public-ellipsis-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*自动隐藏文字*/=====2行
.public-ellipsis-2 {
    display: -webkit-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}
/*自动隐藏文字*/=====3行
.public-ellipsis-3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;

}