Cắt chuỗi đoạn văn bản với 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 mình giới thiệu tới các bạn một cách khác, đó 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:

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

Giải thích code một chút:

• 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 ... Kết quả

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

p {
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    -webkit-line-clamp: 3;
    height: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

• line-height: 25px: Set line-height cho đoạn văn bản
• -webkit-line-clamp:3: Số dòng text hiển thị
• height: 75px: Set chiều cao cho đoạn văn bản. height = line-height * line-clamp Kết quả

Mong rằng bài viết này có ích cho các bạn !