วิธีแก้ไขเมื่อเนื้อหาของอีเลเมนต์ใหญ่กว่าพื้นที่ที่จัดสรร

ใช้คุณสมบัติ CSS overflow เพื่อแก้ไขปัญหาเนื้อหาที่ล้นออกนอกพื้นที่ที่กำหนด คุณสามารถลองรันโค้ดตัวอย่างต่อไปนี้:

ตัวอย่าง

<html>    <head>    </head>    <style>       .scroll{          display:block;          border: 2px solid green;          padding:10px;          margin-top:10px;          width:300px;          height:50px;          overflow:scroll;       }       .auto{          display:block;          border: 2px solid green;          padding:10px;          margin-top:10px;          width:300px;          height:50px;          overflow:auto;       }       </style>       <body>          <p>ตัวอย่างค่า scroll:</p>          <div class = "scroll">             นี่คือเนื้อหาตัวอย่าง นี่คือเนื้อหาตัวอย่าง นี่คือเนื้อหาตัวอย่าง             นี่คือเนื้อหาตัวอย่าง นี่คือเนื้อหาตัวอย่าง นี่คือเนื้อหาตัวอย่าง             นี่คือเนื้อหาตัวอย่าง นี่คือเนื้อหาตัวอย่าง นี่คือเนื้อหาตัวอย่าง             นี่คือเนื้อหาตัวอย่าง นี่คือเนื้อหาตัวอย่าง นี่คือเนื้อหาตัวอย่าง          </div>       <br />    </body> </html>