Tràn văn bản css: dấu chấm lửng

Question

Đâ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

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
Use dotdotdot thư viện
Passive cach
Tổng kết

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

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

Hướng dẫn dấu 3 chấm css

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

Hướng dẫn dấu 3 chấm css

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 cộng thêm chuỗi dấu. is being

Hướng dẫn dấu 3 chấm css

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é

Hướng dẫn dấu 3 chấm css

))

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