line-clamp
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thuộc tính line-clamp trong CSS cho phép giới hạn nội dung của một block theo số dòng được chỉ định.
Note:
Để hỗ trợ kế thừa, thuộc tính có tiền tố nhà sản xuất -webkit-line-clamp chỉ hoạt động kết hợp với thuộc tính display được đặt thành -webkit-box hoặc -webkit-inline-box và thuộc tính -webkit-box-orient được đặt thành vertical. Mặc dù các thuộc tính có tiền tố này đã bị ngừng sử dụng, sự phụ thuộc lẫn nhau của ba thuộc tính này là một hành vi được chỉ định đầy đủ và sẽ tiếp tục được hỗ trợ.
Trong hầu hết các trường hợp, bạn cũng sẽ muốn đặt overflow thành hidden, nếu không nội dung sẽ không bị cắt nhưng dấu ba chấm vẫn được hiển thị sau số dòng được chỉ định.
Khi áp dụng cho các phần tử neo, việc cắt bớt có thể xảy ra ở giữa văn bản, không nhất thiết phải ở cuối.
Cú pháp
/* Giá trị từ khóa */
line-clamp: none;
/* Giá trị <integer> */
line-clamp: 3;
line-clamp: 10;
/* Giá trị toàn cục */
line-clamp: inherit;
line-clamp: initial;
line-clamp: revert;
line-clamp: revert-layer;
line-clamp: unset;
Giá trị
Định nghĩa hình thức
| Initial value | none |
|---|---|
| Applies to | Block containers except multi-column containers |
| Inherited | no |
| Computed value | as specified |
| Animation type | an integer |
Cú pháp hình thức
line-clamp =
none |
[ <integer [1,∞]> || <'block-ellipsis'> ] -webkit-legacy?
<integer> =
<number-token>
<block-ellipsis> =
no-ellipsis |
auto |
<string>
Ví dụ
Cắt bớt đoạn văn
HTML
<p>
In this example the <code>-webkit-line-clamp</code> property is set to
<code>3</code>, which means the text is clamped after three lines. An ellipsis
will be shown at the point where the text is clamped.
</p>
CSS
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Overflow Module Level 4 # propdef-line-clamp |