Cùng Học Web Kiến thức lập trình, quản trị Website, VPS/Server, SEO

Website đang hoàn thiện, do admin lười nhưng thích code tay nên website sẽ hoàn thiện từ từ, mong các bạn thông cảm!

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

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