PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


จัดข้อความยาว ให้อยู่ในกรอบ ด้วย css break word

03 April 2011 By Ninenik Narkdee
css ข้อความยาว break word

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css ข้อความยาว break word



การจัดตัวอักษรที่เป็นข้อความต่อเนื่องยาวติดกัน ในกรณีแสดงใน
พื้นที่ที่กำหนดขอบเขตการแสดง จะเจอกับปัญหา ข้อความล้นออก
นอกกรอบ ที่ต้องการ ดูตัวอย่าง ประกอบ

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh


hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

css สำหรับใช้กำหนด ให้ข้อความแสดงในกรอบ ตามรูปที่ 2

word-wrap:break-word;

ตัวอย่างโค้ดทดสอบทั้งหมด
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div#mylayout_1{
	display:block;
	width:100px;
	border:1px solid #09C;	
	background-color:#FCC;
}
div#mylayout_2{
	display:block;
	width:100px;
	border:1px solid #09C;	
	background-color:#CFC;
	word-wrap:break-word;
}
</style>
</head>

<body>


<div id="mylayout_1">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
</div>
<br />
<br />
<div id="mylayout_2">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
</div>

</body>
</html>

 







Tags:: css break word ข้อความยาว






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง