Khi làm việc trên một trang web hoặc một ứng dụng web, văn bản thường bị bỏ qua, đó là lúc xảy ra sự cố như tràn văn bản. Để giải quyết vấn đề đó, bạn có thể sử dụng một số giải pháp như cắt bớt hoặc tạo dấu chấm lửng cho văn bản [thêm dấu ba chấm] hoặc ngắt dòng văn bản
nội dung trang
- ;
- .
Tràn nội dung văn bản khá hay xảy ra trong các trường hợp sau
- Đối với từ dài;
- Đối với URL dài;
- Trên thiết bị di động;
- Đối với các phần tử vùng chứa hẹp;
- Đối với các ô của bảng;
- Đối với các phần tử nút
Tùy thuộc vào các kiểu CSS mà bạn có, phần tràn văn bản thường trông giống như cuộn ngang hoặc nội dung bị cắt
Xem xét vấn đề sau. Có một vùng chứa có chiều rộng cố định trên một trang có liên kết chứa và trỏ đến một URL dài. Văn bản liên kết sẽ tràn vào vùng chứa và sẽ trông lộn xộn, đồng thời có thể tạo ra cuộn ngang không mong muốn trên các kích thước màn hình nhỏ hơn
1. gói văn bản
1. 2 Thuộc tính ngắt từ
Một cách để xử lý văn bản dài trong CSS là ngắt nó xuống dòng tiếp theo. Cách tiếp cận này rất tiện lợi khi bạn không phải lo lắng về văn bản kéo dài nhiều dòng. Khi sử dụng thuộc tính word-break
, bạn có hai tùy chọn về cách bọc nó
break-all
- điều này sẽ phá vỡ văn bản khi các ký tự không vừa với vùng chứabreak-word
- điều này sẽ phá vỡ văn bản khi các ký tự không vừa với vùng chứa nhưng nó sẽ giữ nguyên chuỗi từ. GHI CHÚ. đây là API không dùng nữa và không nên sử dụng
.container a {
word-break: break-all;
}
Hỗ trợ trình duyệt cho thuộc tính word-break
. https. // caniuse. com/word-break
1. 2 Thuộc tính tràn-quấn
Một tùy chọn khác để ngắt văn bản là sử dụng thuộc tính overflow-wrap
. Thuộc tính này cũng có hai tùy chọn để gói
0 - sẽ ngắt văn bản tại bất kỳ điểm nào nếu văn bản không vừa;.container a { overflow-wrap: break-word; }
break-word
- giống như
0 ngoại trừ nó sẽ ngắt các từ dài ở các điểm tùy ý.container a { overflow-wrap: break-word; }
.container a {
overflow-wrap: break-word;
}
Hỗ trợ trình duyệt cho thuộc tính overflow-wrap
. https. // caniuse. com/wordwrap
2. cắt bớt văn bản
2. 1 Thuộc tính tràn văn bản
Thuộc tính
.container a {
overflow-wrap: break-word;
}
4 sẽ thêm dấu chấm lửng [sẽ thêm ba dấu chấm] vào văn bản nếu nó không vừa trong vùng chứa. Cách tiếp cận này rất hữu ích nếu bạn muốn giữ văn bản trong một dòng. Tuy nhiên, với một số sửa đổi bổ sung, nó cũng có thể được thực hiện cho văn bản nhiều dòngThuộc tính
.container a {
overflow-wrap: break-word;
}
4 có giá trị .container a {
overflow-wrap: break-word;
}
6 phải được đặt trên phần tử cha, liên quan đến văn bản. Hai thuộc tính bổ sung phải được chỉ định là .container a {
overflow-wrap: break-word;
}
7 và .container a {
overflow-wrap: break-word;
}
8GHI CHÚ. Tìm hiểu cách xử lý tràn văn bản cho thẻ chọn
Dòng đơn
.container {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
đa tuyến
Đối với giải pháp nhiều dòng, thuộc tính
.container a {
overflow-wrap: break-word;
}
8 phải được xóa, bằng cách này, văn bản sẽ bị cắt bớt trên dòng khả dụng cuối cùng.container {
overflow: hidden;
text-overflow: ellipsis;
}
Hỗ trợ trình duyệt cho thuộc tính
.container a {
overflow-wrap: break-word;
}
4. https. // caniuse. com/tràn văn bản2. 2 Thuộc tính kẹp dây
Một cách tiếp cận hiện đại hơn là thuộc tính
.container {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
1 sẽ giới hạn văn bản vùng chứa ở một số dòng được chỉ định. Cũng như thêm ba dấu chấm ở cuối. Thuộc tính này sẽ chỉ hoạt động với tiền tố nhà cung cấp .container {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2 và thuộc tính .container {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
3 được đặt thành .container {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
4 hoặc .container {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
5Bỏ dòng giải pháp
.container a {
overflow-wrap: break-word;
}
4, cách tiếp cận này đơn giản và dễ hiểu hơn khi nói đến việc cắt bớt văn bản nhiều dòng. Thuộc tính .container {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
1 phải được đặt thành phần tử bị tràn và giá trị phải bằng số dòng cần mở rộng