CSS การกำหนดค่า Overflow

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

CSS การกำหนดค่า Overflow

Post by GoB » 20/02/2015 9:47 am

CSS การกำหนดค่า Overflow

การกำหนดค่า overflow ในการแสดงข้อความที่มีความยาวมากๆ ในแต่ละครั้งทำให้พบปัญหา คือ ข้อความเกิน หรือ ล้น ออกมา เราจึงมีการกำหนดค่า overflow ที่จะมาจัดการกับข้อความเพื่อให้มีการปรับข้อความโดยอัตโนมัติ ซึ่งค่าที่กำหนดใน overflow กำหนดได้คือ

- overflow:visible เป็นการแสดงข้อความให้เห็นทั้งหมด
- overflow:hidden เป็นการซ่อนข้อความส่วนที่เกิน
- overflow:scoll กำหนดเป็นสกอลบาร์สามารถเลื่อนดูข้อมูลได้ทั้งหมด
- overflow:auto แสดงสกอลบาร์เมื่อมีข้อความที่เกินออกมา

Code: Select all

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	div{
		width: 400px;	//กำหนดความกว้าง
		height:180px;	//กำหนดความสูง
		border:solid 1px black;     //กำหนดลักษณะของเส้นขอบ
		background-color:#eeeeee;    //สีพื้นหลัง
	}
	</style>
</head>
	<div style="overflow:scroll;">
    กุหลาบเป็นไม้ตัดดอกที่มีการปลูกเป็นการค้ากันแพร่หลายทั่วโลกมานานแล้ว กุหลาบเป็นไม้ตัดดอกที่มีการซื้อขาย เป็นอันดับหนึ่งในตลาดประมูลอัลสเมีย ประเทศเนเธอร์แลนด์ ซึ่งเป็นตลาดประมูลไม้ดอก ที่ใหญ่ที่สุดของโลก เมื่อ พ.ศ. 2542 มีการซื้อขายถึง 1,672 ล้านดอก และมักจะมียอดขายสูงสุดในประเทศต่าง ๆ เมื่อเปรียบเทียบกับไม้ดอกชนิดอื่น ๆ โดยประเทศที่ปลูกกุหลาบรายใหญ่ของโลกได้แก่ อิตาลี เนเธอร์แลนด์ สเปน สหรัฐอเมริกา โคลัมเบีย เอกวาดอร์ อิสราเอล เยอรมนี เคนยา ซิมบับเว เบลเยียม ฝรั่งเศส เม็กซิโก แทนซาเนีย และมาลาวี เป็นต้น<br>
    แหล่งที่มา : http://th.wikipedia.org/wiki/ดอกกุหลาบ
    </div>
<body>
</body>
</html>
ผลลัพธ์ที่ได้
==============================================
1.jpg
1.jpg (75.86 KiB) Viewed 1148 times

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests