最近需要做个商品列表，在手机屏幕不太一样的市场里，如何做到列表中刚刚好显示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>
