CSS overflow เป็นการควบคุมเนื้อหาจำนวนมากหรือขนาดใหญ่ ซึ่งจะให้เลือกว่าจะครอบเนื้อหาหรือเพื่อเพิ่มแถบเลื่อน โอเวอร์โฟลว์มี
property ดังต่อไปนี้:
- visible (มองเห็นได้)
- hidden (ซ่อน)
- scroll (เลื่อน)
- auto (อัตโนมัน)
1.สำหรับ
property visible เนื้อหาไม่ได้ถูกครอบจะมองเห็นได้นอก box
element
ตัวอย่างโค้ด ดังนี้
โค้ด: เลือกทั้งหมด
<!DOCTYPE>
<html>
<head>
<style>
p {
width:100px;
height:80px;
border:1px solid;
overflow:visible;
}
</style>
</head>
<body>
<h2>
Welcome to Mindphp
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
เมื่อดูผลลัพธ์จะเห็นได้ว่า ข้อความจะหลุดนอกกรอบ box element ดังรูปภาพด้านล่างนี้
- overflow1.jpg (12.45 KiB) Viewed 3001 times
2.สำหรับ
property Hidden เนื้อหาส่วนที่เหลือจะมองไม่เห็น
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:hidden; ดังนี้
โค้ด: เลือกทั้งหมด
p {
width:100px;
height:80px;
border:1px solid;
overflow:hidden;
}
เมื่อดูผลลัพธ์จะเห็นได้ว่า ข้อความบางส่วนที่เหลือที่เกินมาจะถูกซ่อนไว้ ดังรูปภาพด้านล่างนี้
- overflow5.jpg (12.21 KiB) Viewed 3001 times
3.สำหรับ
property scroll เนื้อหาส่วนเกินจะถูกซ่อนไว้ แต่มีการเพิ่มแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ แถบเลื่อนสามารถเป็นแนวนอนหรือแนวตั้งก็ได้
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:scroll; ดังนี้
โค้ด: เลือกทั้งหมด
p {
width:120px;
height:100px;
border:1px solid;
overflow:scroll;
}
เมื่อดูผลลัพธ์จะเห็นได้ว่า จะมีแถบเลื่อนปรากฎขึ้นเพื่อสามารดูเนื้อหาที่เหลือได้ ดังรูปภาพด้านล่างนี้
- overflow4.jpg (12.12 KiB) Viewed 3001 times
4.สำหรับ
property auto แถบเลื่อนจะปรากฎขึ้นโดยอัตโนมัติเมื่อใดก็ตามที่จำเป็น เช่นเมื่อข้อความเกินไป
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:auto; ดังนี้
โค้ด: เลือกทั้งหมด
p {
width:120px;
height:100px;
border:1px solid;
overflow:auto;
}
ผลลัพธ์ที่ได้คือ ถ้าหากข้อความนั้นยาวเกินไปจนหลุดกรอบ จะมีแถบเลื่อนปรากฎขึ้นโดยอัตโนมัติ
- overflow3.jpg (10.71 KiB) Viewed 3001 times
นอกเหนือจาก property ที่กล่าวมาข้างต้นแล้ว ยังมี
Overflow-x และ
Overflow-y propertyนี้เป็นการระบุเจาะจงเลยว่า เราต้องการแถบเลื่อนแนวตั้งหรือแนวนอน เป็นรูปแบบใด (visible, hidden ,scroll ,auto) โดย Overflow-x คือส่วนของแนวนอนและ Overflow-y คือแส่วนของแนวตั้ง
ตัวอย่างโค้ด ได้กำหนดไว่า overflow-x: scroll;(ให้มีแถบเลื่อน) และ overflow-y:hidden; (ซ่อนแถบเลื่อน) ดังนี้
โค้ด: เลือกทั้งหมด
p {
width:120px;
height:100px;
border:1px solid;
overflow-x:scroll;
overflow-y:hidden;
}
ผลลัพธ์ที่ได้จะแสดง แถบเลื่อนเฉพาะที่เเรากำหนด
- overflow2.jpg (10.3 KiB) Viewed 3001 times
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-
สอนการใช้งาน HTML & CSS
-
ถามตอบ HTML CSS
-
บทเรียน CSS
-
บทเรียน HTML5
-
แลกเปลี่ยนความรู้ PHP
[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]CSS[/url] overflow เป็นการควบคุมเนื้อหาจำนวนมากหรือขนาดใหญ่ ซึ่งจะให้เลือกว่าจะครอบเนื้อหาหรือเพื่อเพิ่มแถบเลื่อน โอเวอร์โฟลว์มี [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/194-e-commerce/%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%98%E0%B8%B8%E0%B8%A3%E0%B8%81%E0%B8%B4%E0%B8%88/3615-property-%E0%B8%9E%E0%B8%A3%E0%B8%AD%E0%B8%9E%E0%B9%80%E0%B8%9E%E0%B8%AD%E0%B8%97%E0%B8%B5-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]property[/url] ดังต่อไปนี้:
[list][*]visible (มองเห็นได้)
[*]hidden (ซ่อน)
[*]scroll (เลื่อน)
[*]auto (อัตโนมัน)[/list]
1.สำหรับ [b]property visible [/b] เนื้อหาไม่ได้ถูกครอบจะมองเห็นได้นอก box [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html/2452-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5-9-html-element.html]element[/url]
[b]ตัวอย่างโค้ด ดังนี้[/b]
[code]<!DOCTYPE>
<html>
<head>
<style>
p {
width:100px;
height:80px;
border:1px solid;
overflow:visible;
}
</style>
</head>
<body>
<h2>
Welcome to Mindphp
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
[/code]
เมื่อดูผลลัพธ์จะเห็นได้ว่า ข้อความจะหลุดนอกกรอบ box element ดังรูปภาพด้านล่างนี้
[attachment=1]overflow1.jpg[/attachment]
2.สำหรับ [b]property Hidden[/b] เนื้อหาส่วนที่เหลือจะมองไม่เห็น
[b]ตัวอย่างโค้ด เปลี่ยนเป็น overflow:hidden; ดังนี้[/b]
[code] p {
width:100px;
height:80px;
border:1px solid;
overflow:hidden;
} [/code]
เมื่อดูผลลัพธ์จะเห็นได้ว่า ข้อความบางส่วนที่เหลือที่เกินมาจะถูกซ่อนไว้ ดังรูปภาพด้านล่างนี้
[attachment=0]overflow2.jpg[/attachment]
3.สำหรับ [b]property scroll[/b] เนื้อหาส่วนเกินจะถูกซ่อนไว้ แต่มีการเพิ่มแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ แถบเลื่อนสามารถเป็นแนวนอนหรือแนวตั้งก็ได้
[b]ตัวอย่างโค้ด เปลี่ยนเป็น overflow:scroll; ดังนี้[/b]
[code] p {
width:120px;
height:100px;
border:1px solid;
overflow:scroll;
} [/code]
เมื่อดูผลลัพธ์จะเห็นได้ว่า จะมีแถบเลื่อนปรากฎขึ้นเพื่อสามารดูเนื้อหาที่เหลือได้ ดังรูปภาพด้านล่างนี้
[attachment=4]overflow3.jpg[/attachment]
4.สำหรับ [b]property auto[/b] แถบเลื่อนจะปรากฎขึ้นโดยอัตโนมัติเมื่อใดก็ตามที่จำเป็น เช่นเมื่อข้อความเกินไป
[b]ตัวอย่างโค้ด เปลี่ยนเป็น overflow:auto; ดังนี้[/b]
[code]p {
width:120px;
height:100px;
border:1px solid;
overflow:auto;
} [/code]
ผลลัพธ์ที่ได้คือ ถ้าหากข้อความนั้นยาวเกินไปจนหลุดกรอบ จะมีแถบเลื่อนปรากฎขึ้นโดยอัตโนมัติ
[attachment=3]overflow4.jpg[/attachment]
นอกเหนือจาก property ที่กล่าวมาข้างต้นแล้ว ยังมี [b]Overflow-x[/b] และ [b]Overflow-y[/b] propertyนี้เป็นการระบุเจาะจงเลยว่า เราต้องการแถบเลื่อนแนวตั้งหรือแนวนอน เป็นรูปแบบใด (visible, hidden ,scroll ,auto) โดย Overflow-x คือส่วนของแนวนอนและ Overflow-y คือแส่วนของแนวตั้ง
ตัวอย่างโค้ด ได้กำหนดไว่า overflow-x: scroll;(ให้มีแถบเลื่อน) และ overflow-y:hidden; (ซ่อนแถบเลื่อน) ดังนี้
[code] p {
width:120px;
height:100px;
border:1px solid;
overflow-x:scroll;
overflow-y:hidden;
}[/code]
ผลลัพธ์ที่ได้จะแสดง แถบเลื่อนเฉพาะที่เเรากำหนด
[attachment=2]overflow5.jpg[/attachment]
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS[/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=73]สอนการใช้งาน HTML & CSS[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]ถามตอบ HTML CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทเรียน CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]บทเรียน HTML5[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=6]แลกเปลี่ยนความรู้ PHP[/url]