Thuộc tính Overflow chỉ định nên cắt nội dung hay thêm thanh cuộn khi nội dung của một phần tử quá lớn để phù hợp với một khu vực xác định.
Thuộc tính Overflow có 4 giá trị:
- visible: giá trị mặc định. Nội dung tràn không được cắt bớt. Phần nội dung tràn được hiển thị bên ngoài hộp chứa của phần tử.
- hidden: nội dung tràn sẽ bị cắt bớt và không được hiển thị.
- scroll: nội dung tràn sẽ bị cắt bớt và một thanh cuộn được thêm vào để có thể xem được phần nội dung tràn này.
- auto: tương tự giá trị scroll, nhưng tự động thêm thanh cuộn khi có nội dung tràn.
Chú ý: thuộc tính overflow chỉ làm việc với các phần tử khối có chiều cao xác định.
1. Overflow: visible
Mặc định giá trị của thuộc tính Overflow là visible, phần nội dung bị thừa ra ngoài hình khối sẽ không bị cắt xén.
Ví dụ 1:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <style> div { width: 300px; height: 100px; background-color: aqua; overflow: visible; } </style> </head> <body> <div class="relative"> HỌC LẬP TRÌNH MIỄN PHÍ TẠI WWW.HIENMINH.COM <br> - HTML/CSS <br> - C# <br> - Java <br> - SQL Server <br> - Xamarin <br> - Angular <br> - React Native <br> </div> </body> </html> |
Kết quả:
Thẻ div có chiều dài 300px, chiều rộng 100px. Do nội dung hiển thị trong thẻ div có chiều cao lớn hơn 100px nên bị tràn ra ngoài phạm vi của thẻ div. Với thuộc tính visible nội dung này vẫn hiển thị bên ngoài phạm vi của thẻ div và không bị cắt xén.
2. Overflow: hidden
Giá trị hidden của thuộc tính Overflow, sẽ cắt xén phần nội dung bị tràn và không hiển thị nội dung này trên phạm vi của phần tử được xét.
Ví dụ 2:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <style> div { width: 600px; height: 100px; background-color: aqua; overflow: hidden; } </style> </head> <body> <div class="relative"> HỌC LẬP TRÌNH MIỄN PHÍ TẠI WWW.HIENMINH.COM VÀ HOCLAPTRINH.XYZ <br> - HTML/CSS <br> - C# <br> - Java <br> - SQL Server <br> - Xamarin <br> - Angular <br> - React Native <br> </div> </body> </html> |
Kết quả:
Cũng với nội dung như ví dụ 1, nhưng phần nội dung bị tràn ra ngoài thẻ div đã được cắt xén và không hiển thị.
Do vậy, chữ Xamarin đã bị cắt đi 1 nửa, 2 dòng chữ Angular và React Native không được hiển thị.
3. Overflow: scroll
Thuộc tính Overflow với scroll sẽ thêm một hình hộp với thanh cuộn để chứa các nội dung bị tràn trong văn bản. Do vậy, nội dung bị tràn sẽ không bị mất đi.
Ví dụ 3:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <style> div { width: 600px; height: 100px; background-color: yellowgreen; overflow: scroll; } </style> </head> <body> <div class="relative"> HỌC LẬP TRÌNH MIỄN PHÍ TẠI WWW.HIENMINH.COM VÀ HOCLAPTRINH.XYZ <br> - HTML/CSS <br> - C# <br> - Java <br> - SQL Server <br> - Xamarin <br> - Angular <br> - React Native <br> </div> </body> </html> |
Kết quả:
4. Overflow: auto
Giá trị auto của thuộc tính overflow tương tự như scroll nhưng hộp thanh cuộn chỉ xuất hiện khi có nội dung tràn, ngược lại sẽ không có hộp thanh cuộn.
Ví dụ 4:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html> <head> <style> div { width: 600px; height: 100px; background-color: yellowgreen; overflow: auto; } </style> </head> <body> <div class="relative"> HỌC LẬP TRÌNH MIỄN PHÍ TẠI WWW.HIENMINH.COM <br> - HTML/CSS <br> - C# <br> - Java <br> - SQL Server <br> - Xamarin <br> - Angular <br> - React Native <br> </div> <br> <div class="relative" style="background-color: violet"> HỌC LẬP TRÌNH MIỄN PHÍ TẠI HOCLAPTRINH.XYZ <br> - C++ <br> - C# <br> - Toán rời rạc </div> </body> </html> |
Kết quả: Trong ví dụ 4, có 2 phần từ DIV:
- Phần tử Div đầu tiên có nội dung bị tràn, nên hộp thanh cuộn xuất hiện.
- Phần tử Div thứ hai có nội dung không bị tràn, nên hộp thanh cuộn không xuất hiện.
