List

Nội dung chính

List

overflow

Bạn cần giới hạn số ký tự hay số dòng trong đoạn văn bản để website đẹp và chuyên nghiệp hơn. Để làm điều này bạn có thể dùng thuộc tính text-overflow trong CSS.

Giới hạn trên 1 dòng:

 

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

overflow2

Trong đoạn code trên thì:

white-space: nowrap: Không 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 ...

Giới hạn trên nhiều dòng

 

p {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
    -webkit-line-clamp: 5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

overflow3

Trên các trình duyệt hỗ trợ webkit như: Chrome, Edge,Safari,.. bạn có thể dùng thuộc tính -webkit-line-clamp để giới hạn số dòng hiển thị.

Chúc các bạn thành công. Nếu có thắc mắc hay đóng góp gì các bạn hãy comment bên dưới nhé.