Trang chủ PHP/HTML/CSS/JS CSS Tips: Cắt chuỗi đoạn văn bản với CSS

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

bởi Vi Nè
681 lượt xem
Bài viết này nằm trong series: CSS Tips

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

Có thể bạn sẽ quan tâm