Một số cách xử lý text-overflow với CSS


Image Description

Dưới đây mình sẽ liệt kê ra một vài rule CSS có thể áp dụng để giải quyết vấn đề trên

1. Sử dụng bộ ba nguyên tử white-spaceoverflowtext-overflow

Bộ 3 này support hầu như tất cả trình duyệt nên ta có thể hoàn toàn yên tâm sử dụng

** Với Block-element

Đơn giản với các phần tử block bạn chỉ cần thêm các rule sau

element {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; /* text-overflow: clip; */
}

Trong đó với:

  • text-overflow: clip; đoạn văn bản overflow sẽ bị ẩn đi,
  • text-overflow: ellipsis; phần bị ẩn đi sẽ được thay thế bằng dấu '3 chấm'
  • ngoài ra bạn còn có thể chỉ định chuỗi thay thế ví dụ text-overflow: "----";tuy nhiên nó chỉ support cho Firefox

Và đương nhiên với block-element bạn chỉ có thể quan sát được sự thay đổi khi nội dung container chứa nó không đủ (ví dụ như co cửa sổ trình duyệt xuống tối đa hoặc set width cho phần tử)

** Với Inline-block-element

Trong nhiều trường hợp bạn muốn cắt chuỗi nhưng chỉ muốn phần tử hiển thị ở dạng inline-block (ví dụ thẻ <a> nếu để display: block khi hover ra ngoài text vẫn có cursor: pointer; nhìn rất không hợp lý) và để cắt chuỗi cho nó ngoài combo bộ 3 kể trên bạn cần phải thêm các thuộc tính sau

element {
  display: inline-block;
  max-width: 100%;
  
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; /* text-overflow: clip; */
}

2. Kết hợp -webkit-line-clamp với overflow

Với line-clamp bạn có thể chỉ định được số dòng muốn hiển thị, phần nội dung vượt quá sẽ bị ẩn đi và thay thế bởi dấu 3 chấm. Cách sử dụng như sau

element {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

Đây là một thuộc tính mới rất hay nhưng rất tiếc chỉ support các trình duyệt nhân webkit, bạn có thể xem xét yêu cầu của người dùng để sử dụng cho hợp lý

3. Sử dụng word-break

Ngoài 2 cách ẩn nội dung tràn trên thì ta còn có thể sử dụng word-break để xuống dòng văn bản. Trong đó hai giá trị hay sử dụng nhất gồm

  • word-break: break-all; - 'To prevent overflow, word may be broken at any character'
  • word-break: break-word; - 'To prevent overflow, word may be broken at arbitrary points'

Kết luận

Trên đây là một vài cách xử lý text-overflow với css thuần tuy rất nhỏ nhưng sẽ giúp bạn cover được rất nhiều khi bị QA test văn bản.

Tài liệu tham khảo

https://viblo.asia/p/mot-so-cach-xu-ly-text-overflow-voi-css-1VgZv1kpKAw



Về Chúng Tôi

Công ty VNIT TECH áp dụng công nghệ mới nhất vào các sản phẩm, giúp khách hàng có được trải nghiệm người dùng hoàn hảo nhất. Chúng tôi có đội ngũ chuyên gia với nhiều năm kinh nghiệm trong linh vực công nghệ thông tin. Các sản phẩm được tối ưu có các phiên bản website và app di động.

Liên Hệ Với Chúng Tôi

Phòng 202 Nhà B
160 Hoàng Hoa Thám - Tây Hồ - Hà Nội

Liên hệ: 02432016899
Đường dây nóng: 0962588450

s