Ẩn Text Thừa Trên Nhiều Dòng Với Text-overflow Trong CSS

Trang chủ » Giới Hạn Dòng Css » Ẩn Text Thừa Trên Nhiều Dòng Với Text-overflow Trong CSS

Có thể bạn quan tâm

List

Nội dung chính

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

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

Từ khóa » Giới Hạn Dòng Css