多行文本溢出显示...的方法(-webkit-line-clamp)

最新推荐文章于 2025-05-27 23:18:44 发布

转载最新推荐文章于 2025-05-27 23:18:44 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yang-shun/p/7345558.html

本文介绍了一种使用-webkit-line-clamp属性限制块元素显示文本行数的方法，并提供了具体的CSS样式代码及HTML示例。此方法适用于需要对文本长度进行控制的网页布局设计。

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

限制在一个块元素显示的文本的行数。

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。

demo.html

<div class="li_title">得力/deli LED灯立体浮雕地球仪/标准教学 高清中英文对照 内显洋流图行政图地形图 送放大镜（ Φ 30cm）</div>

demo.css

.shop .li_title{
    width:100%;
    font-size:16px;
    line-height:20px;
    height: 40px;
    margin-bottom:40px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp:2;    
    -webkit-box-orient: vertical;
}

效果图

转载于:https://www.cnblogs.com/yang-shun/p/7345558.html