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

PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery

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

03 April 2011 By Ninenik Narkdee

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

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

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 สำหรับอ้างอิง