คุณสมบัติของ CSS [overflow: ……….; ] ควบคุมเนื้อหาที่มากเกินไป ให้พอดีกับพื้นที่ ที่กำหนด โดยใช้ scroll มาช่วยในการเลื่อนดูเนื้อหาที่มีจำนวนมากๆ
CSS Overflow ล้น
คุณสมบัติของ [overflow: ………;] สามารถกำหนดว่าจะเก็บเนื้อหาหรือเพิ่มแถบเลื่อน เมื่อเนื้อหามีขนาดใหญ่มากเกินไปหรือล้น ที่จะพอดีกับพื้นที่ที่กำหนด
คุณสมบัติของ [overflow: ………;] มีค่าต่อไปนี้
visible = ชัดเจน คือ ค่าเริ่มต้น overflow ไม่ได้ถูกตัดเนื้อหา และแสดงเนื้อหาภายนอก element จนล้นออกมา
hidden = ซ่อน คือ จะซ่อนส่วนที่เกินเนื้อหา ที่เหลือจะไม่ให้ปรากฎให้เห็น เหมือนกับการตัดออกไปเลย จะแสดงเท่ากับพื้นที่กำหนดไว้เท่านั้น
scroll = เลื่อน คือ เนื้อหาที่ล้นจะถูกตัดและจะมีแถบเลื่อนมาช่วยในการเลื่อนดูเนื้อหาที่ถูกตัดออกไป
auto = อัตโนมัติ คือ เมื่อมีเนื้อหามากเกินไป จะมีการปรับให้มีแถบเลื่อนมาช่วยโดยอัตโนมัติเลย ทันที คล้ายกับ scroll แต่ขึ้นอยู่กับเนื้อหามากหรือน้อยoverflow: visible
ชัดเจน คือ ค่าเริ่มต้น overflow ไม่ได้ถูกตัดเนื้อหา และจะแสดงเนื้อหาภายนอก element จนล้นออกมา ล้นกรอบนั่นเอง
CSS
div .overflow { //element , class
background-color: rgb(150, 21, 21); //สีพื้นหลัง
width: 500px; //ความกว้างของกรอบ
height: 50px; //ความสูงของขอบ
border: 1px solid black; //ขนาดเส้นขอบ รูปแบบ สีของเส้นขอบ
overflow: visible; // ชัดเจน คือ ค่าเริ่มต้น overflow
}HTML
<div class="container p-3"> <h2>CSS Overflow</h2> <p>
By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:
</p> <div class="overflow">
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
</div>
</div>
Example
overflow: hidden
ซ่อน คือ จะซ่อนส่วนที่เกินเนื้อหา ที่เหลือจะไม่ให้ปรากฎให้เห็น เหมือนกับการตัดออกไปเลย จะแสดงเท่ากับพื้นที่กำหนดไว้เท่านั้น
CSS
div .visible {
background-color: rgb(150, 21, 21); //สีพื้นหลัง
width: 500px; //ความกว้างของกรอบ
height: 50px; //ความสูงของขอบ
border: 1px solid black; //ขนาดเส้นขอบ รูปแบบ สีของเส้นขอบ
overflow: hidden; //ซ่อนเนื้อหาที่ล้น เหมือนตัดทิ้ง
}HTML
สำหรับเนื้อหาจะใช้ของตัวอย่างแรก HTML (overflow: visible )Example
overflow: scroll
เลื่อน คือ เนื้อหาที่ล้นจะถูกตัดและจะมีแถบเลื่อนมาช่วยในการเลื่อนดูเนื้อหาที่ถูกตัดออกไป ทำให้เห็นเนื้อหาทั้งหมด
CSS
div .visible {
background-color: rgb(150, 21, 21); //สีพื้นหลัง
width: 500px; //ความกว้างของกรอบ
height: 50px; //ความสูงของขอบ
border: 1px solid black; //ขนาดเส้นขอบ รูปแบบ สีของเส้นขอบ
overflow: scroll; //เลื่อนดูเนื้อหาที่ล้นออกไปได้
}HTML
สำหรับเนื้อหาจะใช้ของตัวอย่างแรก HTML (overflow: visible )Example
overflow: auto
อัตโนมัติ คือ เมื่อมีเนื้อหามากเกินไป จะมีการปรับให้มีแถบเลื่อนมาช่วยโดยอัตโนมัติเลย ทันที คล้ายกับ scroll แต่ขึ้นอยู่กับเนื้อหามากหรือน้อย
CSS
div .visible {
background-color: rgb(150, 21, 21); //สีพื้นหลัง
width: 500px; //ความกว้างของกรอบ
height: 50px; //ความสูงของขอบ
border: 1px solid black; //ขนาดเส้นขอบ รูปแบบ สีของเส้นขอบ
overflow: auto; //เลื่อนดูเนื้อหาที่ล้นออกไปได้
}HTML
สำหรับเนื้อหาจะใช้ของตัวอย่างแรก HTML (overflow: visible )Example
overflow-x and overflow-y
คุณสมบัติของ overflow-x และ overflow-y สามารถกำหนดให้แกน x , y ไม่ว่าจะเปลี่ยนเนื้อหาที่ล้น ไปในแนวนอนหรือแนวตั้ง (หรือทั้งสองอย่าง)
overflow-x = ระบุว่าจะทำอย่างไรกับเนื้อหาแนวนอน การเลื่อนด้านซ้าย - ขวา
overflow-y = ระบุว่าจะทำอย่างไรกับเนื้อหาแนวตั้ง การเลื่อนด้านบน - ล่างCSS
div .visible {
background-color: rgb(150, 21, 21); //สีพื้นหลัง
width: 500px; //ความกว้างของกรอบ
height: 50px; //ความสูงของขอบ
border: 1px solid black; //ขนาดเส้นขอบ รูปแบบ สีของเส้นขอบ
overflow-x: hidden; //แกน x ไม่เลื่อน
overflow-y: scroll; //แกน y เลื่อน ขึ้น-ลง
}HTML
สำหรับเนื้อหาจะใช้ของตัวอย่างแรก HTML (overflow: visible )Example
Overflow เหมือนกับเว็บที่เราเห็น เวลาเนื้อหามากๆ จะมี Scroll ให้เราเลื่อนดูเนื้อหา ยังไงลองนำไปประยุกต์ใช้ดูเน้อ คิดว่าเรื่อง Overflow และเรื่องที่แล้ว Position จำเป็นกับการเขียนเว็บอยู่น่ะ บ๊ะบายยย . เจอกันเรื่อง CSS Float
