最近需要做個商品列表，在手機屏幕不太一樣的市場里，如何做到列表中剛剛好顯示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>
