Làm thế nào để bạn sử dụng dấu chấm lửng css?

Khi một chuỗi văn bản tràn qua ranh giới của vùng chứa, nó có thể làm cho toàn bộ bố cục của bạn trở nên lộn xộn. Đây là một mẹo hay để xử lý tràn văn bản bằng cách cắt ngắn các chuỗi dài bằng dấu chấm lửng CSS

Tràn văn bản (với dấu ba chấm CSS)

Cách xử lý tràn văn bản (Với dấu ba chấm CSS)

Bản trình diễn văn bản tràn ngập của chúng tôi

Trong thủ thuật nhanh này, chúng tôi sẽ sử dụng bản trình diễn sau để cho thấy cách hoạt động của tính năng tràn văn bản

Khi văn bản quá dài

Các chuỗi văn bản dài, không có khoảng trắng và được chứa trong một thứ gì đó không rộng bằng, sẽ tự nhiên tràn ra ngoài ranh giới của vùng chứa (như địa chỉ email này trong ảnh chụp màn hình bên dưới)

Như bạn có thể thấy, nó làm cho một mớ hỗn độn thực sự

Thêm thuộc tính CSS Overflow

Với một thuộc tính đơn giản, chúng ta có thể dọn dẹp cái này. Bằng cách thêm overflow: hidden; vào đoạn chứa địa chỉ email, chúng tôi sẽ ẩn mọi thứ không phù hợp với vùng chứa

giải quyết. Chúng tôi đã cắt ngắn thành công văn bản dài

Cắt bớt tốt hơn với CSS Ellipsis

Bố cục của chúng tôi trông đẹp hơn, nhưng nó không thực tế. Chúng tôi thực sự đã làm cho các email hiển thị không chính xác, mang lại thông tin sai lệch cho người dùng một cách hiệu quả. Tuy nhiên, bằng cách thêm quy tắc

  Test Test Test Test Test Test

0 vào chuỗi email của chúng tôi, chúng tôi sẽ nhận được thông tin sau

Dấu chấm lửng là 3 dấu chấm. Giờ đây, người dùng có thể nhìn thấy bố cục chính xác và nhờ dấu chấm lửng CSS, họ biết rằng có nhiều địa chỉ email hơn những gì được hiển thị

Ghi chú. điều này chỉ hoạt động khi các thuộc tính

  Test Test Test Test Test Test

1 và

  Test Test Test Test Test Test

2 được sử dụng cùng nhau

Giá trị tràn văn bản khác

Có những giá trị khác mà bạn có thể sử dụng thay cho dấu chấm lửng

  Test Test Test Test Test Test

3 (là giá trị mặc định) cắt ngắn chuỗi một cách hiệu quả và cũng sẽ cắt chuỗi ở giữa ký tự

  Test Test Test Test Test Test

4 (nghe có vẻ tuyệt vời, nhưng không được hỗ trợ từ xa bởi bất kỳ trình duyệt nào)

  Test Test Test Test Test Test

5 (một chuỗi trống) nối thêm chuỗi đã cắt ngắn với bất kỳ thứ gì được xác định và ngăn không cho chuỗi bị cắt giữa ký tự. Đây có thể là

  Test Test Test Test Test Test

6 chẳng hạn, hoặc thậm chí là

  Test Test Test Test Test Test

7

Ghi chú. trình duyệt hỗ trợ cho các giá trị thay thế này không tốt bằng với

  Test Test Test Test Test Test

8. Ảnh chụp màn hình ở trên là từ Firefox, nhưng Chrome mặc định là

  Test Test Test Test Test Test

3 trong những trường hợp này

Lý do bạn gặp sự cố ở đây là vì phần tử

  Test Test Test Test Test Test

0 của phần tử

  Test Test Test Test Test Test

1 của bạn không bị ràng buộc. Bạn có cài đặt

  Test Test Test Test Test Test

0, nhưng vì phần tử được đặt thành

  Test Test Test Test Test Test

0 (i. e. mặc định) nó đang bỏ qua nó và không có gì khác đang hạn chế chiều rộng của nó

Bạn có thể khắc phục điều này bằng cách thực hiện một trong các thao tác sau

• Đặt phần tử thành

  
    Test Test Test Test Test Test
  

  1 hoặc

  
    Test Test Test Test Test Test
  

  2 (có thể là phần tử trước, nhưng tùy thuộc vào nhu cầu bố cục của bạn)
• Đặt một trong các phần tử vùng chứa của nó thành

  
    Test Test Test Test Test Test
  

  2 và đặt cho phần tử đó một giá trị cố định là

  
    Test Test Test Test Test Test
  

  0 hoặc

  
    Test Test Test Test Test Test
  

  5
• Đặt phần tử thành

  
    Test Test Test Test Test Test
  

  6 hoặc

  
    Test Test Test Test Test Test
  

  7 (có thể là phần tử đầu tiên, nhưng một lần nữa, một trong hai phần tử sẽ có tác dụng tương tự khi có liên quan đến dấu chấm lửng)

Tôi muốn đề xuất

  Test Test Test Test Test Test

1, vì điều này sẽ có tác động tài sản thế chấp tối thiểu đối với bố cục của bạn;