Thuộc tính overflow trong CSS rất hữu ích khi người dùng muốn hiển thị nội dung lớn hơn trong một container nhỏ hơn mà không cần thay đổi kích thước nội dung. Thuộc tính này cho phép cắt nội dung, cung cấp thanh cuộn để xem nội dung bị cắt, hoặc hiển thị nội dung ra ngoài container.
Cú pháp
Cú pháp cho thuộc tính CSS Overflow:
Selector { overflow: /*giá trị*/ }
Các giá trị cho thuộc tính CSS Overflow:
| STT | Giá trị & Mô tả |
|---|---|
| 1 | visible Giá trị mặc định, nội dung không bị cắt và hiển thị ra ngoài hộp phần tử. |
| 2 | hidden Cắt nội dung tràn ra khỏi hộp phần tử, nội dung bị cắt không hiển thị. |
| 3 | scroll Cắt nội dung tràn, hiển thị thanh cuộn để xem nội dung bị cắt. |
| 4 | auto Tự động hiển thị thanh cuộn khi nội dung tràn. |
Hãy xem ví dụ về thuộc tính CSS overflow:
Ví dụ
<!DOCTYPE html> <html> <head> <title>CSS Overflow</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #containerDiv { margin: 0 auto; height: 100px; width: 100px; overflow: auto; } </style> </head> <body> <form> <fieldset> <legend>CSS Overflow</legend> <div id="containerDiv"> <img id="image" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg"> </div> <input type="button" onclick="fitHeight()" value="Xóa thanh cuộn"> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var imgSelect = document.getElementById("image"); var containerDiv = document.getElementById("containerDiv"); function fitHeight() { containerDiv.style.height = imgSelect.height+'px'; containerDiv.style.width = imgSelect.width+'px'; containerDiv.style.overflow = 'hidden'; } </script> </body> </html>
Kết quả
Trước khi nhấn nút:
Sau khi nhấn nút 'Xóa thanh cuộn':
Ví dụ khác cho thuộc tính CSS overflow:
Ví dụ
<!DOCTYPE html> <html> <head> <title>CSS Overflow</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #containerDiv { margin: 0 auto; height: 110px; overflow: scroll; } </style></head> <body> <form> <fieldset> <legend>CSS Overflow</legend> <div id="containerDiv"> Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả.</div> <input type="button" onclick="add()" value="Xóa thanh cuộn"> </fieldset> </form> <script> function add() { document.querySelector('#containerDiv').style.overflow = "hidden"; } </script> </body> </html>
Kết quả
Trước khi nhấn nút 'Xóa thanh cuộn':
Sau khi nhấn nút 'Xóa thanh cuộn':
