เราสามารถใช้คุณสมบัติล้น CSS เพื่อจัดการ/จัดการเนื้อหาที่ล้นขององค์ประกอบ คุณสมบัตินี้อนุญาตให้ผู้ใช้ตัดเนื้อหา จัดเตรียมแถบเลื่อนเพื่อดูเนื้อหาที่ตัดแล้ว แสดงเนื้อหาภายนอกคอนเทนเนอร์ ดังนั้นชื่อจะล้น
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติ CSS Overflow -
Selector {
overflow: /*value*/
} ให้เราดูตัวอย่างคุณสมบัติล้น CSS -
ตัวอย่าง
<!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> ผลลัพธ์
ก่อนคลิก 'ลบแถบเลื่อน' ปุ่ม −
หลังจากคลิก 'ลบแถบเลื่อน' ปุ่ม −
มาดูตัวอย่างอื่นสำหรับคุณสมบัติล้น CSS -
ตัวอย่าง
<!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="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> ผลลัพธ์
ก่อนคลิกปุ่มใด ๆ −
หลังจากคลิกปุ่ม 'ลบแถบเลื่อน' -
