Css ... tràn văn bản

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 text-overflow: ellipsis; 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 overflow và text-overflow đượ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

clip (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ự

fade (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)

" " (một chuỗi rỗ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 chuỗi đó bị cắt giữa ký tự. Đây có thể là

...

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

...

1

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

...

2. Ảnh chụp màn hình ở trên là từ Firefox, nhưng Chrome mặc định là clip trong những trường hợp này

Từ dài nhất trong bất kỳ từ điển tiếng Anh chính nào là pneumonoultramicroscopicsilicovolcanoconiosis, một từ dùng để chỉ bệnh phổi do hít phải các hạt silica rất mịn, đặc biệt là từ núi lửa;

...

Kẹp

Sử dụng

...

4 để cắt bớt văn bản ở giới hạn của vùng nội dung

Từ dài nhất trong bất kỳ từ điển tiếng Anh chính nào là pneumonoultramicroscopicsilicovolcanoconiosis, một từ dùng để chỉ bệnh phổi do hít phải các hạt silica rất mịn, đặc biệt là từ núi lửa;

...

---

áp dụng có điều kiện

Di chuột, tập trung và các trạng thái khác

Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng

...

5 để chỉ áp dụng tiện ích

...

4 khi di chuột

Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States

Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng

...

0 để áp dụng tiện ích

...

4 chỉ với kích thước màn hình trung bình trở lên

Cách sử dụng văn bản

Tại sao văn bản của tôi tràn CSS?

Văn bản tràn là gì?

Làm cách nào để cắt bớt văn bản trong CSS?