Trở về

CSS Tips: Cắt chuỗi đoạn văn bản với CSS

bởi Vi Nè

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

Bài viết cùng từ khóa
Chúng tôi tạm dừng chức năng bình luận, mọi thắc mắc vui lòng gửi thông qua mục liên hệ. Xin cám ơn!

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon