Sunday , August 18 2019
Home | PROGRAMMING | HTML/CSS | Ẩn text thừa trên nhiều dòng với text-overflow trong CSS

Ẩn text thừa trên nhiều dòng với text-overflow trong CSS

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;
}

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;
}

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é.

About duongthien

Đam mê công nghệ, thích xem bóng đá và nghe nhạc hoà tấu.

Leave a Reply

Your email address will not be published. Required fields are marked *