通过css控制段落只显示两行，且第二行结尾处超出部分以省略号显示

最新推荐文章于 2025-07-19 15:06:59 发布

原创最新推荐文章于 2025-07-19 15:06:59 发布 · 7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS来实现段落文本仅显示两行，并在第二行末尾用省略号表示超出部分的方法。具体包括设置字体大小、颜色、行高、宽度等样式属性，同时利用text-overflow、display及-webkit-line-clamp等属性实现文本截断效果。

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

<p class="test">通过css控制段落只显示两行，且第二行结尾处超出部分以省略号显示通过css控制段落只显示两行，且第二行结尾处超出部分以省略号显示通过css控制段落只显示两行，且第二行结尾处超出部分以省略号显示</p>

.test {
    font-size:0.48rem;
    color:#333;
    line-height:0.8rem;
    width:8.8rem;
    word-break:break-all;
    text-overflow:ellipsis;//显示为省略号
    display:-webkit-box;//对象作为伸缩盒子模型显示
    -webkit-box-orient:vertical;//设置或检索伸缩盒对象的子元素的排列方式
    -webkit-line-clamp:2;//显示行数## 标题文字 ##
    overflow:hidden;
}