Chúng ta có thể sử dụng thuộc tính overflow trong CSS để quản lý/xử lý nội dung tràn của một phần tử. 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ị*/ }
Ví dụ 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ả.</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':
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: 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/sas/images/sas-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 bất kỳ nút nào:
Sau khi nhấn nút 'Xóa thanh cuộn':
