Các line-clampsẽ cắt cụt bất động sản văn bản ở một số cụ thể của dòng.
Thông số kỹ thuật của nó hiện đang là Bản nháp của Biên tập viên, vì vậy điều đó có nghĩa là không có gì ở đây được đặt ra bởi vì nó là một công việc đang được tiến hành. Điều đó nói rằng, nó được định nghĩa là một cách viết tắt của max-linesvà block-overflow, cách viết tắt của nó được ghi nhận là có nguy cơ bị loại trong Đề xuất Ứng viên.
Thật dễ dàng để xem max-linessẽ được nixed như thế nào vì hàm của nó (đặt số dòng trước khi cắt bớt) đã được đưa vào line-clampvà bất kỳ sự trừu tượng nào khác có thể không cần thiết. Nhưng điều đó đang khiến chúng ta đi chệch hướng, vì vậy hãy tiếp tục.
Cú pháp
.module ( line-clamp: (none | ); )line-clamp chấp nhận các giá trị sau trong bản nháp hiện tại của thông số kỹ thuật:
none: không đặt tối đa số dòng và kết quả là không có sự cắt xén nào xảy ra.: đặt số dòng tối đa trước khi cắt bớt nội dung rồi hiển thị dấu chấm lửng (…) ở cuối dòng cuối cùng.
Dấu chấm lửng đó sẽ hiển thị dưới dạng ký tự Unicode (U + 2026) nhưng có thể được thay thế bằng 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.
Này, tôi không thể làm điều này với tràn văn bản phải không?
Câu hỏi công bằng, bạn của tôi, và câu trả lời là ...
(Xem những gì tôi đã làm ở đó?)
… Sắp xếp.
text-overflowthực sự có một ellipsisgiá trị sẽ cắt ngắn văn bản:
.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )Xem phần tràn văn bản Pen của Geoff Graham (@geoffgraham) trên CodePen.
Tốt đẹp, đó là một khởi đầu tốt. Nhưng nếu chúng ta muốn giới thiệu dấu chấm lửng không phải ở dòng đầu tiên mà ở đâu đó, chẳng hạn như dòng thứ ba của văn bản?
Đó là nơi line-clampphát huy tác dụng. Chỉ cần lưu ý rằng sự kết hợp của ba thuộc tính được sử dụng để làm cho nó xảy ra:
.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )Xem Bút kẹp dòng (-webkit) của Geoff Graham (@geoffgraham) trên CodePen.
Firefox hỗ trợ điều này ngay bây giờ, chính xác theo cách này (với các -webkit-tiền tố và tất cả).
Vậy, bắt được là gì?
Ngay bây giờ, đó là hỗ trợ trình duyệt. Kẹp dòng là một phần của Mô-đun tràn CSS cấp độ 3 hiện đang ở trong Bản nháp của Người biên tập và hoàn toàn không được hỗ trợ vào lúc này.
Chúng ta có thể nhận được một số hành động kẹp dòng với một -webkit-tiền tố (kỳ lạ thay, nó hoạt động trên tất cả các trình duyệt chính). Trên thực tế, đó là cách mà bản demo trên đã được thực hiện.
Chúng tôi có thể đi xuống đường dẫn JavaScript nếu chúng tôi muốn. Clamp.js sẽ thực hiện thủ thuật:
Xem Pen line-Kẹp (kẹp.js) của Geoff Graham (@geoffgraham) trên CodePen.
Hỗ trợ trình duyệt
Đây là sự hỗ trợ cho việc triển khai kẹp dòng độc quyền và không có giấy tờ của WebKit.
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 * |