关于 -webkit-line-clamp 详解

最新推荐文章于 2026-06-11 09:15:24 发布

转载最新推荐文章于 2026-06-11 09:15:24 发布 · 5.9k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/tanxu/p/5806233.html

本文介绍了一种使用-webkit-line-clamp属性限制块元素内文本行数的方法，通过与其他WebKit属性结合使用，如display和-webkit-box-orient等，实现了商品列表或新闻列表中文字的两行显示效果。

最近需要做个商品列表，在手机屏幕不太一样的市场里，如何做到列表中刚刚好显示2行，偶然间发现淘宝的手机版有用到-webkit-line-clamp来实现这种效果

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

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

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

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

适用场景：适合于这种商品列表或者新闻列表的展示

兼容性：

demo：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>测试</title>
	<style type="text/css">
		*{
		 padding: 0px;
		 margin: 0px;
		}
		.box{
			width: 220px;
		    background: #eee;
		    position: relative;
		    overflow: hidden;
		    min-height: 80px;
		    padding: 10px 10px 10px 100px;
		}
		.box img{
			width: 80px;height: 80px;
			position: absolute;
			left: 10px;
			top: 10px;
		}
		.box h3{
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    overflow: hidden;
			font-size: 14px;
			line-height: 20px;
		}
		.box span{
			font-size: 14px;
			color: #f00;
			line-height: 30px;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="http://120.25.174.99:668/attachment/mall/product/201605031628.jpg" alt="" />
		<h3>大号高款陶瓷花盆带托盘桌面花盆中国风梅兰竹菊花盆陶瓷竹菊花盆陶瓷竹菊花盆陶瓷</h3>
		<span>$230</span>
	</div>
</body>
</html>

转载于:https://www.cnblogs.com/tanxu/p/5806233.html