css box-lines property


  Translation results：

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 propertysyntax

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 propertyexample

<!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

Popular Recommendations

Home

Videos

Q&A

submit