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 (cắt chuỗi đ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ắt chuỗi trên 1 dòng

p {
    width: 500px;
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
}Code language: CSS (css)

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ắ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;
}
Code language: CSS (css)

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

• 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!

Kết luận

Qua đây là một số chia sẻ về cắt chuỗi đoạn văn bản với CSS, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về CSS.

Nguồn: https://viblo.asia/p/cat-chuoi-doan-van-ban-voi-css-4dbZNDxy5YM

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.