ยินดีต้อนรับ กรุณา สมัครสมาชิก หรือเข้าสู่ระบบ

Home » webboard » CSS
เข้าชม : 684

css แก้ปัญหา ตัวอักษรเลยทะลุขอบ

โพสต์เมื่อ: วันอาทิตย์ 7 ธันวาคม 2557  19:40 น.

การปรับ 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;
}

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

หุหุ สวยงาม



คุณต้องสมัครสมาชิก ถึงจะโพสกระทู้ได้