Hiển thị rút gọn chuỗi bằng CSS

blogphp11 thg7 2019
CSS
Hiển thị rút gọn chuỗi bằng CSS
Để giới hạn số kí tự trong một đoạn văn bản, chúng ta thường xử lý bằng các ngôn ngữ lập trình phía Server hoặc dùng Javascript phía Client. Trong bài viết này ta thực hiện với css, đó là sử dụng thuộc tính text-overflow trong CSS.

Cú pháp dùng để cắt chuỗi trên 1 dòng:

div {
    width: 500px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    white-space: nowrap: Ngăn k cho đoạn văn bản xuống dòng
    overflow: hidden: Ẩn đoạn text bị thừa
    text-overflow: ellipsis: Cắt một đoạn text và thay thế bằng dấu ...


Cú pháp dùng để cắt chuỗi trên nhiều dòng:

div {
    display: -webkit-box;
    width: 300px;
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background:blue;
}

    -webkit-line-clamp:3;  Số dòng text hiển thị.

Bài Viết Liên Quan:

Gửi bài viết tới Facebook

Gửi hình ảnh

Popular Posts

Labels