Các block-overflowbất động sản truncates văn bản và chỉ ra nhiều nội dung sau bằng cách chèn một dấu chấm lửng hoặc chuỗi tùy chỉnh sau một số dòng mà được thiết lập bởi max-linesbất động sản.
Thuộc tính đã được giới thiệu trong Bản thảo của người biên tập về đặc điểm kỹ thuật cấp 3 mô-đun tràn CSS. Điều đó có nghĩa là nó đang thử nghiệm vào lúc này và được coi là một công việc đang được tiến hành. Trên thực tế, bạn có thể theo dõi cuộc trò chuyện bao gồm cả cuộc trò chuyện về việc đổi tên tài sản hoàn toàn.
Cú pháp
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow chấp nhận các giá trị sau:
clip: Không chèn ký tự để chỉ ra thêm văn bản theo sau. Thay vào đó, nội dung chỉ đơn thuần là cắt bớt và cắt bỏ ở ký tự cuối cùng.ellipsis: Hiển thị dấu chấm lửng (…) ở cuối dòng cuối cùng. Nó phải hiển thị dưới dạng ký tự Unicode (U + 2026) nhưng có thể được thay thế bằng một ký tự tương đương dựa trên ngôn ngữ nội dung và chế độ viết của Tác nhân người dùng đang được sử dụng.: Hiển thị văn bản tùy chỉnh (ví dụ: “Đọc thêm →”) ở cuối dòng cuối cùng. Thông số cho biết User-Agent có thể thay thế chuỗi bằng dấu chấm lửng nếu chuỗi dài "vô lý".
Một lần nữa, tất cả những điều này đều là công việc đang được thử nghiệm. Các giá trị này có thể thay đổi. Hoặc, nhiều hơn có thể được thêm vào. Ví dụ: đã có những lời kêu gọi cho một dấu chấm lửng “thông minh hơn” có thể có khả năng làm nhiều việc hơn, chẳng hạn như cắt văn bản ở giữa:
One thing led to another and… yada yada yada, that was that.Sử dụng line-clampcho ngắn hạn
Chúng ta có thể nhận được cùng một thứ bằng cách sử dụng line-clampviết tắt cho các thuộc tính block-overflowvà max-lines.
Tuy nhiên, vì nó hiện được định nghĩa, line-clampchỉ chấp nhận một giá trị số duy nhất cho max-linesvà đặt ngầm định block-overflowthành ellipsisgiá trị. Vì vậy, nếu bạn muốn sử dụng một chuỗi tùy chỉnh để cắt ngắn, thì bạn phải sử dụng biểu mẫu dài để thay thế.
Hỗ trợ trình duyệt
Hiện tại chưa có, nhưng bạn có thể nhận được một số hỗ trợ bằng cách sử dụng triển khai độc quyền của WebKit về line-clamp:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Không | 17 | 5 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2.3 * | 5,0-5,1 * |