Đôi khi bạn gặp trường hợp mà phải hiển thị một lượng nội dung lớn hơn nhiều phần không gian được cấp phát cho nó. Chương này sẽ trình bày cách xử lý vấn đề này.
CSS cung cấp thuộc tính overflow để nói cho trình duyệt điều gì cần phải làm nếu nội dung hiển thị của một hộp lớn hơn nhiều phần không gian đã cấp cho hộp đó. Thuộc tính này có thể nhận một trong các giá trị sau:
| Giá trị | Miêu tả |
|---|---|
| visible | Cho phép nội dung có thể tràn qua các đường viền của phần tử chứa nó |
| hidden | Phần nội dung sẽ bị cắt tại cạnh đường viền và sẽ không có thanh cuốn (scrollbar) nào được hiển thị |
| scroll | Kích cỡ của phần tử chứa không thay đổi, nhưng hiển thị (hay thêm vào) các thanh cuốn (scrollbar) để cho phép người dùng thực hiện thao tác scroll để xem hết phần nội dung |
| auto | Tương tự như giá trị scroll, nhưng thanh cuốn (scrollbar) sẽ chỉ được hiển thị nếu kích cỡ của nội dung lớn hơn không gian hộp hiển thị và bị tràn |
Ví dụ sau minh họa cách sử dụng thuộc tính overflow và các giá trị của thuộc tính này trong CSS.
<html> <head> </head> <style type="text/css"> .scroll{ display:block; border: 1px solid red; padding:5px; margin-top:5px; width:300px; height:50px; overflow:scroll; } .auto{ display:block; border: 1px solid red; padding:5px; margin-top:5px; width:300px; height:50px; overflow:auto; } </style> <body> <p>Vi du gia tri scroll cua thuoc tinh overflow trong CSS:</p> <div class="scroll"> Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen. </div> <br /> <p>Vi du gia tri auto cua thuoc tinh overflow trong CSS:</p> <div class="auto"> Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen. </div> </body> </html>Kết quả là:
Vi du gia tri scroll cua thuoc tinh overflow trong CSS:
Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.
Vi du gia tri auto cua thuoc tinh overflow trong CSS:
Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi kha nang mo cua cho cau thu nhap tich len
