css實現多個div在同一行並且div中內容可斷行
實現效果：
<!DOCTYPE html>
<html>
<head>
<style>
.all{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:600px;
height: 600px;
border:1px solid black;
}
.item{
-moz-box-flex:1.0; /* Firefox */
/*-webkit-box-flex:1.0; /* Safari and Chrome */*/
box-flex:1.0;
text-overflow: ellipsis;
display: -webkit-box; /*//將元素設為盒子伸縮模型顯示*/
-webkit-box-orient: vertical; /*//伸縮方向設為垂直方向*/
-webkit-line-clamp: 4; /*//超出3行隱藏，並顯示省略號 */
width: 130px;
background: #00F7DE;
line-height:20px;max-height:80px;
height: 80px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div class="all">
<div class="item" id="p1">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p1">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p1">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p1">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p1">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
<div class="item" id="p2">L-測試測試 （99.5%-99.08%） 單位：kg</div>
</div>
</body>
</html>
重點： box-flex 屬性