<!DOCTYPE html>
<html>
<head>
<title>淘宝flexiblejs</title>
<meta charset="utf-8">
<!-- 苹果手机开启对webapp的支持，content=yes则全屏运行，默认为no -->
<meta name="apple-mobile-web-app=capable" content="yes">
<!-- 苹果设备全屏显示 -->
<meta name="apple-touch-fullscreen" content="yes">
<!-- 格式检测 -->
<meta name="format-detection" content="telephone=no,email=no,address=no">
<script type="text/javascript" src="build/flexible_css.debug.js"></script>
<script type="text/javascript" src="build/flexible.debug.js"></script>
<style type="text/css">
.item-section{min-height:10rem;background-color:#ee0a3b;position:relative;font-size:12px}
[data-dpr="2"] .item-section{font-size:24px}
[data-dpr="3"] .item-section{font-size:36px}
.item-section_header{text-align:center}
.item-section_header img{10rem}
.item-section ul{padding:.133333rem}
.flag{display:table;100%;margin-bottom:1px;background-color:#fff}
.flag .flag-item{display:table-cell;padding:.16rem 0;vertical-align:top;background-color:#fff}
.flag .flag-item.figcaption{133.333333rem;padding-left:.2rem;padding-right:.2rem;position:relative}
.flag .flag-item.figure{2.4rem;height:2.4rem}
.flag .flag-item img{2.4rem;height:2.4rem;vertical-align:top}
.flag .flag-title a{color:#333;line-height:1.25;overflow:hidden;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;box-orient:vertical;display:-webkit-box;display: box}
.flag .flag-price{padding:.15rem 0 .2rem}.flag .flag-price span{display:inline-block;background-color:#ee0a3b;vertical-align:middle;border-radius:.026667rem;padding:.026667rem .08rem .013333rem;color:#fff;font-weight:700;margin-right:.066667rem;font-size:11px}
[data-dpr="2"] .flag .flag-price span{font-size:22px}
[data-dpr="3"] .flag .flag-price span{font-size:33px}
.flag .flag-price strong{display:inline-block;vertical-align:middle;font-weight:700;color:#ee0a3b;font-size:16px;margin-right:.16rem}
[data-dpr="2"] .flag .flag-price strong{font-size:32px}
[data-dpr="3"] .flag .flag-price strong{font-size:48px}
.flag .flag-price small{display:inline-block;vertical-align:middle;font-weight:700;color:#ee0a3b;font-size:12px}
[data-dpr="2"] .flag .flag-price small{font-size:24px}
[data-dpr="3"] .flag .flag-price small{font-size:36px}
.flag .flag-type{color:#ff3600}
.flag .flag-btn{position:absolute;2.133333rem;height:.64rem;line-height:.64rem;background-color:#ee0a3b;text-align:center;color:#fff;font-weight:700;font-size:14px;bottom:.133333rem;right:.2rem;border-radius:.026667rem}
[data-dpr="2"] .flag .flag-btn{font-size:28px}
[data-dpr="3"] .flag .flag-btn{font-size:42px}
</style>
<style type="text/css">
html,body{
height: 100vh;
background-color: #ee0a3b;
}
</style>
</head>
<body>
<div class="item-section">
<div class="item-section_header">
<h2>
<img src="taobao.jpg" alt="">
</h2>
</div>
<ul>
<li class="flag" role="link" href="">
<a href="" class="figure flag-item">
<img src="grayscale.jpg">
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a>Nike耐克官方 ZOOM KOBE VENOMEN 5 EP 科比男子篮球鞋815757</a>
</div>
<div class="flag-price">
<span>双十一价</span>
<strong>￥1999</strong>
<small>(满300减150)</small>
</div>
<div class="flag-type">
6875人在疯抢
</div>
<a class="flag-btn">
马上抢！
</a>
</div>
</li>
<li class="flag" role="link" href="">
<a href="" class="figure flag-item">
<img src="grayscale.jpg">
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a>Nike耐克官方 ZOOM KOBE VENOMEN 5 EP 科比男子篮球鞋815757</a>
</div>
<div class="flag-price">
<span>双十一价</span>
<strong>￥1999</strong>
<small>(满300减150)</small>
</div>
<div class="flag-type">
6875人在疯抢
</div>
<a class="flag-btn">
马上抢！
</a>
</div>
</li>
<li class="flag" role="link" href="">
<a href="" class="figure flag-item">
<img src="grayscale.jpg">
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a>Nike耐克官方 ZOOM KOBE VENOMEN 5 EP 科比男子篮球鞋815757</a>
</div>
<div class="flag-price">
<span>双十一价</span>
<strong>￥1999</strong>
<small>(满300减150)</small>
</div>
<div class="flag-type">
6875人在疯抢
</div>
<a class="flag-btn">
马上抢！
</a>
</div>
</li>
</ul>
</div>
</body>
</html>
ps:关于-webkit-line-clamp：