การจัดการเนื้อหาที่ล้นด้วย CSS

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

ไวยากรณ์

ไวยากรณ์สำหรับคุณสมบัติ CSS Overflow ดังนี้:

Selector {    overflow: /*value*/ }

ลองดูตัวอย่างสำหรับคุณสมบัติ CSS overflow:

ตัวอย่าง

<!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.</div> <input type="button" onclick="add()" value="Remove Scrollbars"> </fieldset> </form> <script> function add() {    document.querySelector('#containerDiv').style.overflow = "hidden"; } </script> </body> </html>

ผลลัพธ์

ก่อนคลิกปุ่ม 'Remove Scrollbars':

หลังคลิกปุ่ม 'Remove Scrollbars':

ลองดูอีกตัวอย่างสำหรับคุณสมบัติ CSS overflow:

ตัวอย่างเพิ่มเติม

<!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>

ผลลัพธ์

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

หลังคลิกปุ่ม 'Remove Scrollbars':