Thuộc tính tràn CSS hữu ích khi người dùng muốn hiển thị nội dung lớn hơn trong vùng chứa 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 người dùng cắt nội dung, cung cấp thanh cuộn để xem nội dung đã cắt, hiển thị nội dung bên ngoài vùng chứa do đó làm tràn tên.
Cú pháp
Sau đây là cú pháp cho thuộc tính CSS Overflow -
Selector {
overflow: /*value*/
} Sau đây là các giá trị cho thuộc tính CSS Overflow -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | hiển thị Nó là giá trị mặc định, nội dung không bị cắt bớt và được hiển thị bên ngoài hộp của phần tử, và do đó, tên thuộc tính bị tràn |
| 2 | ẩn Nó cắt nội dung tràn hộp của phần tử, nội dung bị cắt sẽ không hiển thị |
| 3 | cuộn Nó cắt nội dung tràn hộp của phần tử, nội dung được cắt bớt hiển thị dưới dạng các thanh cuộn cũng được hiển thị cùng với nội dung |
| 4 | tự động Nó sẽ tự động hiển thị các thanh cuộn để xem nội dung bị tràn |
Hãy xem một ví dụ về thuộc tính tràn CSS -
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="Remove Scrollbars">
</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> Đầu ra
Trước khi nhấp vào bất kỳ nút nào -
Sau khi nhấp vào ‘Xóa thanh cuộn’ nút -
Hãy để chúng tôi xem một ví dụ khác cho thuộc tính tràn CSS -
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">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</div>
<input type="button" onclick="add()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
function add() {
document.querySelector('#containerDiv').style.overflow = "hidden";
}
</script>
</body>
</html> Đầu ra
Trước khi nhấp vào ‘Xóa thanh cuộn’ nút -
Sau khi nhấp vào nút 'Xóa thanh cuộn' -
