测试box-lines

box-lines决定了box布局是否要换行显示。但是目前浏览器并不支持。

by weiming le

HTML

<h1>别看了，ff和chrome都不支持该属性，奶奶个腿儿的。这两个属性就是用来决定子元素是否换行显示的。是不是想到了white-space:nowrap这个属性呢？（注意，webkit内核针对该属性写法是-webkit-lines,moz写法是-moz-box-lines）</h1>

<div class="demo">
  
<h2>box-lines:single</h1>
<div id="wrap1" class="box">
  <div class="box1">
    <h3>box1</h3>
  </div>
  <div class="box2">
    <h3>box2</h3>
  </div>
  <div class="box3">
    <h3>box3</h3>
  </div>
</div>
<h2>box-lines:multiple</h1>
<div id="wrap2" class="box">
  <div class="box1">
    <h3>box1</h3>
  </div>
  <div class="box2">
    <h3>box2</h3>
  </div>
  <div class="box3">
    <h3>box3</h3>
  </div>
</div>
</div>

CSS

h1 {
  border:2px solid orange;
  padding:10px;
  font-size:16px;
}
.box {
  width:600px;
  border:2px solid orange;
  display:-webkit-box;
}
.box1, .box2, .box3 {
  width:260px;
  height:100px;
  margin:10px 20px;
  background:#333;
  color:#fff;
}
#wrap1 {
  -webkit-box-orient:horizontal;
  -webkit-lines:single;
}
#wrap2 {
  -webkit-box-orient:horizontal;
  -webkit-lines:multiple;
}