PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

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


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

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:: ข้อความยาว break word css






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


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