ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 4 CSS3 Text Effects ตอน 2
2.text wrapping
การจัดวางข้อความไม่ให้ล้นออกนอกรอบ ทำได้โดยใส่โค๊ด word-wrap:break-word;
ตัวอย่างเช่น

<html>
<head>
<style> 
p.test
{width:120px; 
border:5px solid red;
word-wrap:break-word;}
</style>
</head>
<body>

<p> ข้อความนี้ยาวเกินไป ยาววววววมว๊ากๆๆๆๆๆๆๆๆๆๆๆๆเวอร์รรรรรรรรรรรรรรรรรจริงจริงๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆ  CSS3 word wrap จะช่วยจัดข้อความไม่

ให้ล้นออกนอกกรอบ</p>

</body>
</html>

ผลลัพธ์คือ

   *** หากไม่ใส่โค๊ด word-wrap:break-word;  ตามตัวอย่างข้างบนข้อความจะล้นออกนอกกรอบ เช่นรูปด้านล่าง***


อ่านเพิ่มเติม
บทที่ 4 CSS3 Text Effects ตอน1


ข้อความอ้างอิง
http://rabbitinblack.com
http://www.w3schools.com