Webkit-line-kẹp css

Question

Use css line clamp

Nội dung chính Show

Thuộc tính tràn văn bản với giá trị dấu chấm lửng
Thuộc tính text-overflow with value string
Thuộc tính tràn văn bản được sử dụng kèm theo. bay lượn
Thêm dấu ba chấm cho đoạn văn bản nhiều dòng
Sử dụng thuộc tính -webkit-line-clamp
Use dotdotdot thư viện
Passive cach
Tổng kết

Trước đây khi muốn hiển thị văn bản dạng dấu chấm lửng (văn bản…) thì chỉ sử dụng cho đoạn văn bản có 1 dòng.
Nếu muốn hiển thị đoạn văn bản có nhiều dòng thì cần sử dụng kẹp dòng
Cách sử dụng.
______7

Nguồn. https. // thủ thuật css. com/line-clampin/
Các trình duyệt được sử dụng. https. // caniuse. com/?search=line-clamp

Trong trang web của bạn, sẽ có những danh sách các bài viết, danh sách các sản phẩm cùng mô tả ngắn của danh sách đó. Để rõ ràng hơn, bạn xem hình bên dưới

Danh sách bài viết

Phần mô tả ngắn là phần được mình đóng khung màu đỏ, bạn thấy đó, nó có chiều dài nên với cái hình bên trái. Vì sao phải giới hạn lại số dòng hiển thị đó bằng css và phải xem được trên tất cả các trình duyệt chứ không phải chỉ giới hạn được trên

Và đây là mã để giới hạn số dòng đó

 
                            display: -webkit-box;
                            max-height: 3.2rem;
                           -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: normal;
                            -webkit-line-clamp: 2;
                            line-height: 1.6rem;

-webkit-line-clamp. 2; . Nếu bạn muốn 3 dòng thì edit number 2 to number 3 ĐỒNG THỜI CÓ THỂ CHỈNH SỬA LẠI max-height, line-height sao cho trình duyệt hiển thị đẹp nhất. Lưu ý value max-height >= 2 lần line-height

Và đây là kết quả, ở đây mình cho giới hạn 2 dòng và sau khi giới hạn cuối đoạn mô tả ngắn sẽ có dấu . )

Kết quả Trên firefox

Chúc các nick thành công. )

Đây là đoạn văn bản có tràn văn bản sử dụng đây là đoạn văn bản có tràn văn bản sử dụng đây là đoạn văn bản có tràn văn bản sử dụng đây là đoạn văn bản có tràn văn bản sử dụng đây là đoạn văn bản có tràn văn bản sử dụng đây là đoạn văn bản có tràn văn bản sử dụng

Giả sử ban đầu ta có CSS

p {
    border: 1px solid #cc0000;
    overflow: hidden;
    white-space: nowrap;
    width: 200px;
}

Show the browser when no text-overflow

Đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn

Thêm thuộc tính tràn văn bản, CSS viết

p {
    border: 1px solid #cc0000;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    width: 200px;
}

Hiển thị trình duyệt khi có tràn văn bản

Đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn

Thuộc tính tràn văn bản với giá trị dấu chấm lửng

Thuộc tính tràn văn bản với giá trị dấu chấm lửng. Cắt đoạn văn bản và thay thế bằng dấu 3 chấm

Thêm thuộc tính tràn văn bản với giá trị dấu chấm lửng, CSS viết

p {
    border: 1px solid #cc0000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

Hiển thị trình duyệt khi có tràn văn bản

Đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn

Thuộc tính text-overflow with value string

Thuộc tính text-overflow with value string. Cắt một đoạn văn bản và thay thế bằng một chuỗi khác

Thêm thuộc tính tràn văn bản với chuỗi giá trị, CSS viết

p {
    border: 1px solid #cc0000;
    overflow: hidden;
    text-overflow: '...v.v...';
    white-space: nowrap;
    width: 200px;
}

Hiển thị trình duyệt khi có tràn văn bản

Đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn

Thuộc tính tràn văn bản được sử dụng kèm theo. bay lượn

Thuộc tính tràn văn bản được sử dụng kèm theo. hover, hover, control value hover, normal used to display full text for user

Add the selector. di chuột, viết CSS

p {
    border: 1px solid #cc0000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

p:hover { 
    overflow: visible;
    white-space: pre-line;
    width: 500px;
}

Hiển thị trình duyệt khi có tràn văn bản

Đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn đây là đoạn văn bản có sử dụng tràn

Đã đăng vào ngày 12 tháng 19 năm 2019 8. 16 SA 2 phút đọc

Thêm dấu ba chấm cho đoạn văn bản nhiều dòng

Thông thường, để thêm dấu. when content too long, ta thường để tràn. ẩn, khoảng trắng. nowrap same with text-overflow. dấu chấm lửng. Tuy nhiên, cách này chỉ có tác dụng làm 1 dòng văn bản thêm dấu ba chấm mà thôi. Nó sẽ không làm được như thế này

Vì vậy sau đây mình sẽ giới thiệu một vài cách giải quyết

Sử dụng thuộc tính -webkit-line-clamp

Đây là một thuộc tính CSS3, chỉ sử dụng được cho các phần tử có hiển thị là hộp. Sau đây là danh sách các trình duyệt được hỗ trợ

Cách sử dụng rất đơn giản, cho đoạn văn bản thuộc tính sau

.three-line-paragraph {
    display: block; /* Fallback trong trường hợp trình duyệt không hỗ trợ display dạng box */
    display: -webkit-box;
    line-height: 16px; /* Fallback  */
    max-height: 74px; /* Fallback số dòng bạn muốn giới hạn */
    -webkit-line-clamp: 3; /* Số dòng bạn muốn giới hạn */
    visibility: visible; /* Tránh bug không giới hạn số dòng được do trình duyệt */
    text-overflow: ellipsis;
    overflow:hidden;
    max-width: 300px; /* Mình giới hạn độ dài paragraph để nó xuống dòng phục vụ demo thôi */
}

Thử nghiệm

Use dotdotdot thư viện

Nếu bạn không cảm thấy trong việc sử dụng js để giải quyết, bạn có thể sử dụng thư viện dotdotdot tại https. //github. com/FrDH/dotdotdot-js. Thư viện này nhẹ, dễ sử dụng và trên hết, nó hỗ trợ đầy đủ các trình duyệt cũ (với phiên bản dotdotdot jQuery, hoặc bản dotdotdot es5 với polyfill). Đây cũng là phương pháp mình hay sử dụng

Passive cach

Cách này chỉ để vui thôi

Ta sẽ xử lý đoạn văn bản này phía server (hoặc javascript cũng được)

Giả sử nhé, đoạn văn bản dài 4 dòng sẽ chứa từ 80-100 ký tự, 101 ký tự sang dòng 5 (Tùy giao diện), bạn hãy giới hạn đoạn nội dung đoạn chỉ chứa tầm 90 ký tự rồi thêm chuỗi dấu. is being

Cách này có tác dụng khi khách hàng không để ý hoặc không kiểm tra trên các màn hình khác nhau nhé

))

Tổng kết

Nhìn chung thì việc thêm dấu ba chấm theo số dòng văn bản khá là khó nhằn nếu không có bản cập nhật mới nhất của Css3 hay những thư viện hỗ trợ khác (Thực ra tự viết cũng được mà mất thời gian chết lên được)

programming css

Webkit-line-kẹp css

Tổng kết

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội