前端的css--超出2行就隐藏并且出现省略

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

原创最新推荐文章于 2025-05-10 08:49:01 发布 · 823 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#超出2行就出现省略号

web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍两种使用CSS实现文本溢出时显示省略号的方法。第一种方法利用-webkit-line-clamp属性限制文本行数，配合其他WebKit特有的属性实现多行文本截断效果。第二种方法通过绝对定位插入省略号伪元素达到单行截断目的。

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

方式1：overflow:hidden;
text-overflow:ellipsis;
disply:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
disply:-webkit-box;–>将作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical;–>从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2;这个属性不是css的规范属性，需要组合上面2个属性，表示显示的行数。
方式2：
div{
width: 300px;
height: 60px;
line-height: 30px;
overflow: hidden;
border: 1px solid #333;
position: relative;
}
div::after{
display: block;
content: “…”;
position: absolute;
bottom:0;
right: 0;
}