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

最新推荐文章于 2024-08-28 10:27:06 发布

原创最新推荐文章于 2024-08-28 10:27:06 发布 · 7.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

1 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

<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;
}

您可能感兴趣的与本文相关的镜像

Yolo-v8.3

Yolo

YOLO（You Only Look Once）是一种流行的物体检测和图像分割模型，由华盛顿大学的Joseph Redmon 和Ali Farhadi 开发。 YOLO 于2015 年推出，因其高速和高精度而广受欢迎