การทำงานกับคุณสมบัติล้น CSS

คุณสมบัติล้น CSS มีประโยชน์เมื่อผู้ใช้ต้องการแสดงเนื้อหาที่ใหญ่ขึ้นในคอนเทนเนอร์ขนาดเล็กลงโดยไม่ต้องปรับขนาดเนื้อหา คุณสมบัตินี้อนุญาตให้ผู้ใช้ตัดเนื้อหา จัดเตรียมแถบเลื่อนเพื่อดูเนื้อหาที่ตัดแล้ว แสดงเนื้อหาภายนอกคอนเทนเนอร์ ดังนั้นชื่อจะล้น

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติ CSS Overflow -

Selector {
   overflow: /*value*/
}

ต่อไปนี้เป็นค่าสำหรับคุณสมบัติ CSS Overflow -

ซีเนียร์	คุณค่าและรายละเอียด
1	มองเห็นได้ เป็นค่าเริ่มต้น เนื้อหาไม่ถูกตัดและแสดงผลนอกกรอบขององค์ประกอบ และทำให้ชื่อคุณสมบัติล้น
2	ซ่อนอยู่ คลิปเนื้อหาที่ล้นกล่ององค์ประกอบมองไม่เห็นเนื้อหาที่ตัด
3	เลื่อน มันคลิปเนื้อหาที่ล้นกล่องขององค์ประกอบ เนื้อหาที่ถูกตัดจะเห็นเป็นแถบเลื่อนจะถูกแสดงพร้อมกับเนื้อหา
4	อัตโนมัติ มันจะแสดงแถบเลื่อนโดยอัตโนมัติเพื่อดูเนื้อหาที่ล้น

มาดูตัวอย่างคุณสมบัติล้น 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/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>

ผลลัพธ์

ก่อนคลิกปุ่มใด ๆ −

การทำงานกับคุณสมบัติล้น CSS

หลังจากคลิก 'ลบแถบเลื่อน' ปุ่ม −

การทำงานกับคุณสมบัติล้น CSS

ให้เราดูตัวอย่างอื่นสำหรับคุณสมบัติล้น 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

หลังจากคลิก ปุ่ม 'ลบแถบเลื่อน' −

การทำงานกับคุณสมบัติล้น CSS