box
英[bɒks] 美[bɑ:ks]
n.Box; box-like object; box; sentry room
vt. Put... into a box [box, box]
vt.& vi.Boxing
Third person singular: boxes Plural: boxes Present participle: boxing Past tense: boxed Past participle: boxed
lines
英[laɪnz] 美[laɪnz]
n. Line; line; (actor’s) lines; arrangement (line) Plural noun); method
v. line up (third person singular of line); mark with a line; [baseball] (batsman) hit (a straight ball); line...
css box-lines property syntax
Function: Specifies whether the column should be displayed in a new line if it exceeds the space in the parent box.
Syntax: box-lines: single|multiple;
Description: single All child elements will be placed on separate lines or column. (Unmatched elements are considered overflow). multiple allows the box to expand to multiple lines to accommodate all of its child elements.
Notes: By default, horizontal boxes arrange their child elements in separate rows, while vertical boxes arrange their child elements in separate columns.
css box-lines property example
<!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>Run instance »
Click the "Run instance" button to view the online instance