พื้นที่เล็ก ๆ ของคนจริง ๆ: การปรับ CSS ไม่ให้ข้อความหลุดจากกรอบ

วันศุกร์ที่ 28 มกราคม พ.ศ. 2554

การปรับ CSS ไม่ให้ข้อความหลุดจากกรอบ

เขียน CSS มาเจอปัญหาตัวอักษรหลุดออกนอกกรอกประจำ แต่ยังไม่ได้หาวิธีแก้อย่างเป็นจริงเป็นจังซักทีวันนี้ไปเจอเว็บหนึ่งเข้าจำ ไม่ได้แล้วว่าเว็บอะไร _^_ มันบอกวิธีแก้เลยขอมาอัพเดทผ่าน Blog ซักหน่อย

ปกติแล้วเวลาเราจะแสดง 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;
}

ทีนี้ลองรันดูน้า