widows
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thuộc tính widows của CSS đặt số dòng tối thiểu trong một bộ chứa khối phải được hiển thị ở đầu trang, vùng, hoặc cột.
Trong ngành xuất bản, widow (dòng mồ côi cuối) là dòng cuối cùng của đoạn văn xuất hiện một mình ở đầu trang. (Đoạn văn được tiếp nối từ trang trước.)
Cú pháp
css
/* Giá trị <integer> */
widows: 2;
widows: 3;
/* Giá trị toàn cục */
widows: inherit;
widows: initial;
widows: revert;
widows: revert-layer;
widows: unset;
Giá trị
<integer>-
Số dòng tối thiểu có thể đứng một mình ở đầu một đoạn mới sau khi ngắt phân mảnh. Giá trị phải là số dương.
Định nghĩa chính thức
| Initial value | 2 |
|---|---|
| Applies to | block container elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |
Cú pháp chính thức
widows =
<integer [1,∞]>
<integer> =
<number-token>
Ví dụ
Kiểm soát widows trong cột
HTML
html
<div>
<p>Đây là đoạn đầu tiên chứa một số văn bản.</p>
<p>
Đây là đoạn thứ hai chứa nhiều văn bản hơn đoạn đầu tiên.
Nó được dùng để minh họa cách widows hoạt động.
</p>
<p>
Đây là đoạn thứ ba. Nó có nhiều văn bản hơn một chút so với đoạn đầu tiên.
</p>
</div>
CSS
css
div {
background-color: #8cffa0;
columns: 3;
widows: 2;
}
p {
background-color: #8ca0ff;
}
p:first-child {
margin-top: 0;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |