Giao diện trông ổn với dữ liệu mẫu nhưng xuất hiện thanh cuộn ngang khi người dùng nhập một mã tham chiếu dài. Nguyên nhân có thể chỉ là chuỗi không có chỗ ngắt dòng thuận tiện. Trước khi giảm cỡ chữ hoặc ẩn phần bị tràn, hãy thử xử lý quy tắc xuống dòng đúng tại vùng nội dung đó.
1. Bắt đầu từ chuỗi gây lỗi
Trong trang thử nghiệm, đặt một mã giả đủ dài vào thẻ thông tin có chiều rộng giới hạn. Không dùng token thật để tái hiện lỗi, kể cả khi bạn chỉ định chụp màn hình gửi cho đồng nghiệp.
<div class="reference-card">
<p>Mã tham chiếu:</p>
<p class="reference-value">DEMO20260926ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
</div>.reference-card {
box-sizing: border-box;
width: 100%;
max-width: 20rem;
padding: 1rem;
border: 1px solid #777;
}
.reference-value {
white-space: normal;
overflow-wrap: anywhere;
}Theo MDN về overflow-wrap, anywhere cho phép ngắt một chuỗi khó xuống dòng khi cần tránh tràn. Đây là cách hiển thị, không phải thao tác thêm ký tự xuống dòng vào dữ liệu gốc.
2. Đừng thay mọi thứ bằng word-break: break-all
word-break: break-all cho phép ngắt giữa các ký tự của văn bản không phải CJK, có thể khiến các từ thông thường bị chia nhỏ dù chuyển cả từ xuống dòng tiếp theo dễ đọc hơn. Xem tài liệu word-break để phân biệt hai mục đích.
Với thẻ hiển thị mã, email hoặc nội dung do người dùng nhập, hãy thử quy tắc có phạm vi hẹp trước. Không áp dụng một lựa chọn ngắt chữ cho toàn bộ website chỉ vì một thành phần bị tràn.
3. Nếu vẫn tràn, kiểm tra phần tử cha
Trong công cụ phát triển, xem chiều rộng thực tế và CSS đang có hiệu lực. Một khai báo white-space: nowrap ở nơi khác, chiều rộng cố định quá lớn hoặc phần tử cha không co lại có thể khiến sửa quy tắc chữ chưa đủ.
Nếu thẻ nằm trong Flexbox, kiểm tra kích thước tối thiểu của flex item. Có thể cần min-width: 0 trên đúng phần tử phải co, nhưng đừng thêm hàng loạt mà chưa xác định phần tử nào vượt khung. Với Grid, cần xem cả định nghĩa cột, không chỉ nội dung bên trong.
4. Xuống dòng khác với giấu nội dung
overflow: hidden có thể làm biến mất phần mã người dùng cần đọc. Dấu ba chấm phù hợp với một số danh sách, nhưng phải có cách xem hoặc sao chép toàn bộ giá trị khi tác vụ yêu cầu. Đừng coi việc thanh cuộn ngang biến mất là bằng chứng lỗi đã được giải quyết.
Đối với đoạn code hoặc bảng cần giữ cấu trúc, cuộn ngang trong vùng riêng có thể hợp lý hơn ép mọi thứ xuống dòng. Quyết định dựa trên cách người đọc sử dụng dữ liệu: đọc văn xuôi, đối chiếu cột hay sao chép lệnh.
5. Checklist kiểm tra trước khi phát hành
- Thử chuỗi không có dấu cách, câu bình thường và tiếng Việt có dấu.
- Kiểm tra màn hình hẹp và khi tăng cỡ chữ.
- Đảm bảo toàn bộ giá trị vẫn đọc được, không chỉ phần đầu.
- Sao chép mã sang trình soạn thảo để đối chiếu dữ liệu gốc.
- Kiểm tra cả thẻ đứng riêng lẫn thẻ trong bố cục Flexbox hoặc Grid thực tế.
- Không đưa dữ liệu riêng tư vào ảnh chụp lỗi.
Ví dụ và checklist trên là hướng dẫn để bạn kiểm thử, không phải kết quả đo trên một sản phẩm cụ thể. Sửa đúng vùng bị tràn giúp bố cục ổn định mà không hy sinh khả năng đọc và sử dụng dữ liệu.
Chưa có bình luận. Hãy là người đầu tiên chia sẻ ý kiến.