css box-lines属性怎么用

互联网 19-5-29

css box-lines属性用于规定如果列超出了父框中的空间，是否要换行显示，其语法是box-lines: single|multiple。

css box-lines属性怎么用？

作用：规定如果列超出了父框中的空间，是否要换行显示。

语法：

box-lines: single|multiple;

说明：single所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。multiple允许框扩展为多行，以容纳其所有子元素。

注释：默认地，水平框会在单独的行中排列其子元素，而垂直框会在单独的列中排列其子元素。

css box-lines属性使用示例

<!DOCTYPE html> <html> <head> <style>  .container { width:300px; border:1px dotted black; /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; -moz-box-lines:multiple; /* Safari and Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-lines:multiple; .box { width:100px; /* Firefox */ -moz-box-flex: 1.0; /* Safari and Chrome */ -webkit-box-flex: 1.0; /* W3C */ box-flex: 1.0; } </style> </head> <body> <div class="container">   <div class="box">11111111111</div>   <div class="box">22222222222</div>   <div class="box">33333333333</div>   <div class="box">44444444444</div> </div> <p><b>注释：</b>目前没有浏览器支持 box-lines 属性。</p> </body> </html>

效果输出：