ปกติแล้วเวลาเราจะแสดง Content ใน Div นั้นก็เขียน Style ปกติได้เลยค่ะ ไม่มีอะไรมากมายในกอไผ่
เช่นเรียวเขียน
<style>
.wording {
width:200px;
background-color:#960;
}
</style>
<body>
<div class="wording">แหมคนเขียนบทความนี้น่ารักมากๆ ยังไม่มีแฟนค่ะมีแต่กิ๊ก ^^</div>
</body>
ทีนี่เรียวของรันดูนะคะ จะได้ผลดังภาพ
จะ เห็นว่าถ้าเขียนเป็นข้อความปกติก็ไม่มีอะไรเกิิดขึ้น ตัวอักษรก็ยังอยู่ในกรอบสวยงามค่ะ เพราะเรากำหนดความกว้างของ div ไว้นั่นเอง ทีนี้เรียวจะแก้ Wording เป็น
<div class="wording">แหมคนเขียนบทความนี้น่ารักมากๆ เบอร์โทรศัพทคือ 089-2222222222222222222222222222222222222
</div>
ทีนี้จะเกิดอะไรขึ้นลองรันดูค่ะ
แปว !!!! จะเห็นว่าตัวอักษรดันหลุดทะลุกรอกออกนอกโลกเป็น Star War ไปเลย 555555+
สังเกตุว่ากรณีที่อักขระเป็นตัวเดียวกันต่อกันหลาย ๆ ตัวจะเกิดปัญหาทะลุนอกกรอบอย่างที่เห็น
วิธีแก้ปัญหาคือใส่ Style word-wrap: break-word; ให้มันก็หายแล้วค่ะ ....หุหุหุ
.wording {
width:200px;
background-color:#960;
word-wrap: break-word;
}
ทีนี้ลองรันดูน้า
หุหุ สวยงาม
