Tràn văn bản css

Xin chào các bạn. Tiếp tục với series bài thủ thuật hay xoay quanh CSS, hôm nay mình sẽ chia sẻ bài viết với chủ đề "Làm thế nào để xử lý bị tràn văn bản"

Đây là vấn đề được các bạn QA rất hay sử dụng để kiểm tra giao diện. Ví dụ họ thường có định dạng kiểu 1001 chữ A liền nhau, nhập một đoạn văn bản cực dài cho tiêu đề hoặc bất kỳ phần tử nào có thể hiển thị văn bản. Và đương nhiên trong quá trình code Front-End (FE) nếu bạn không cover được các trường hợp thực tế có thể xảy ra thì chắc chắn QA sẽ log bug và tặng bạn 1 ticket nho nhỏ

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

1. Sử dụng bộ ba nguyên tử khoảng trắng, tràn, tràn văn bản

Bộ 3 này hỗ trợ hầu như tất cả cá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 khối phần tử bạn chỉ cần thêm các quy tắc sau

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

Trong đó với

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

  0 đoạn tràn văn bản sẽ bị ẩn đi,

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

  1 phần bị ẩn đi sẽ được thay thế bằng dấu '3 chấm'
• outside ra you also can only string instead ví dụ

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

  2 tuy nhiên nó chỉ hỗ trợ cho Firefox

Và đương nhiên với block-element, bạn chỉ có thể quan sát được sự thay đổi khi vùng chứa nội dung chứa nó không đủ (ví dụ như cửa sổ duyệt xuống tối đa hoặc đặt chiều rộng 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 khối nội tuyến (ví dụ thẻ

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

3 nếu để

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

4 khi di chuột ra ngoài văn bản vẫn có

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

5 nhìn rất không hợp lý) và để cắt chuỗi cho nó bên ngoài kết hợp

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 tràn

With

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

6 you can only only a number of lines to display, the content section too will be hide đi and instead by the 3 dấu 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ỉ hỗ trợ các webkit duyệt nhân, 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. Use word-break

Ngoài 2 cách ẩn nội dung tràn trên, ta còn có thể sử dụng

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

7 để xuống dòng văn bản. Trong đó hai giá trị hoặc sử dụng bao gồm

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

  8 - 'Để tránh tràn, từ có thể bị ngắt ở bất kỳ ký tự nào'

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

  9 - 'Để tránh tràn, từ có thể bị ngắt ở các điểm tùy ý'

Kết luận

Trên đây là một vài cách xử lý tràn văn bản 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. Nếu bạn còn cách nào hay hơn đừng ngại chia sẻ cho cộng đồng FE nhé

Nếu thấy bài viết hay thì hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút theo dõi để biết thêm nhiều thứ hay ho hơn