Bài viết này trình bày phương pháp ngăn nội dung tràn và cho phép cuộn bằng CSS.
Làm cách nào để ngừng tràn nội dung và bật tính năng cuộn?
Mục đích để ngăn nội dung tràn ra ngoài là để nội dung nằm gọn trong vùng chứa của nó và không ảnh hưởng tiêu cực đến hiệu suất của trang web. Nó có thể dễ dàng hiểu ngữ cảnh và có thể cải thiện khả năng truy cập cho người dùng. Để có lời giải thích chi tiết, chúng ta hãy thảo luận thông qua một ví dụ:
Bước 1: Kích hoạt tính năng cuộn với tràn nội dung
Ban đầu, hãy bắt đầu với việc tạo một bảng bên trong tệp HTML mà hiệu ứng cuộn sẽ được áp dụng trên đó. Giả sử, bảng đã được tạo và bao gồm sáu hàng và bảy cột và một số dữ liệu giả được cung cấp cho bảng:
< bàn >
< tr >
< quần què > đầu 1 < / quần què >
< quần què > đầu 2 < / quần què >
< quần què > đầu 3 < / quần què >
< quần què > đầu 4 < / quần què >
< quần què > đầu 5 < / quần què >
< quần què > đầu 6 < / quần què >
< quần què > đầu 7 < / quần què >
< / tr >
< tr >
< td > Hàng 1 < / td >
< td > Hàng 1 < / td >
< td > Hàng 1 < / td >
< td > Hàng 1 < / td >
< td > Hàng 1 < / td >
< td > Hàng 1 < / td >
< td > Hàng 1 < / td >
< / tr >
< tr >
< td > Hàng 2 < / td >
< td > Hàng 2 < / td >
< td > Hàng 2 < / td >
< td > Hàng 2 < / td >
< td > Hàng 2 < / td >
< td > Hàng 2 < / td >
< td > Hàng 2 < / td >
< / tr >
< tr >
< td > Hàng 3 < / td >
< td > hàng 3 < / td >
< td > hàng 3 < / td >
< td > hàng 3 < / td >
< td > hàng 3 < / td >
< td > hàng 3 < / td >
< td > hàng 3 < / td >
< / tr >
< tr >
< td > hàng 4 < / td >
< td > hàng 4 < / td >
< td > hàng 4 < / td >
< td > hàng 4 < / td >
< td > hàng 4 < / td >
< td > Hàng 4 < / td >
< td > Hàng 4 < / td >
< / tr >< tr >
< td > Hàng 5 < / td >
< td > Hàng 5 < / td >
< td > Hàng 5 < / td >
< td > Hàng 5 < / td >
< td > Hàng 5 < / td >
< td > Hàng 5 < / td >
< td > Hàng 5 < / td >
< / tr >
< tr >
< td > Hàng 6 < / td >
< td > Hàng 6 < / td >
< td > Hàng 6 < / td >
< td > Hàng 6 < / td >
< td > Hàng 6 < / td >
< td > Hàng 6 < / td >
< td > Hàng 6 < / td >
< / tr >
< / bàn >
Sau khi thực thi đoạn mã trên, trang web sẽ xuất hiện như sau:
Đầu ra hiển thị rằng dữ liệu bảng ở định dạng khó đọc hơn và bảng chiếm nhiều dung lượng.
Bước 2: Đặt hiệu ứng tràn và cuộn Trong đoạn mã trên: Sau khi thực thi đoạn mã trên, trang web sẽ xuất hiện như sau: Trang web minh họa rằng bảng hiện đang tiêu tốn ít dung lượng hơn và ngăn không cho nội dung bị tràn. Ngoài ra, hiệu ứng cuộn đã được kích hoạt. Ghi chú : Bằng cách thiết lập ' tràn: tự động ' hoặc ' tràn: cuộn ”, người dùng có thể kích hoạt tính năng cuộn để tràn nội dung. Ngoài ra, “ tràn: ẩn ” có thể được sử dụng để ngăn tràn hoàn toàn. Thuộc tính “overflow-x” và “overflow-y” được sử dụng để kiểm soát tràn và cho phép cuộn theo trục ngang và trục dọc. Nó ngăn nội dung tràn và cho phép cuộn để tạo thiết kế đáp ứng tương tác cho tất cả các thiết bị. Bài viết này đã trình bày cách ngăn nội dung tràn ra ngoài và cho phép cuộn bằng CSS.
Sau đó, quấn bảng với cha mẹ “
.tràn ra {
chiều rộng : 200px ;
chiều cao : 200px ;
tràn-x : tự động ;
tràn-y : tự động ;
hành vi cuộn : trơn tru ;
}
Phần kết luận