Bạn đang gặp phải một vấn đề mà website của mình khi responsive, các dòng text nó cứ phá vỡ theme yêu quý của mình. 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 1 dòng

Cú pháp:

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

Giải thích:

• 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ắt nhiều dòng

Cú pháp:

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

Giải thích:

• 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

Tuy đơn giản nhưng ai cũng phải cần biết. Theo dõi các series CSS Tips khác tại đây