Home > Article > Web Front-end > How to use css box-lines attribute
How to use css box-lines attribute
- 藏色散人Original
- 2019-05-29 14:28:473346browse
css box-lines attribute is used to specify whether a column should be displayed in a new line if it exceeds the space in the parent box. Its syntax is box-lines: single|multiple.
How to use the css box-lines attribute?
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: All child elements of single will be placed in separate rows or columns. (Unmatched elements are considered overflow). multiple allows the box to expand to multiple lines to accommodate all of its child elements.
Note: By default, horizontal boxes arrange their children in separate rows, and vertical boxes arrange their children in separate columns.
css box-lines attribute usage 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>Effect output:
The above is the detailed content of How to use css box-lines attribute. For more information, please follow other related articles on the PHP Chinese website!