CSS ตัดคําขึ้นบรรทัดใหม่ ป้องกันข้อความเกินขอบ

CSS ตัดคําขึ้นบรรทัดใหม่ ป้องกันข้อความเกินขอบ บทความนี้สอนใช้คำสั่ง word-wrap: break-word เพื่อป้องกันข้อความทะลุ หรือเกินขอบเขตที่จะแสดงผล มักเกิดขึ้นกับข้อความที่ไม่มีเว้นวรรค สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง CSS ตัดคําขึ้นบรรทัดใหม่ ป้องกันข้อความเกินขอบ

<style>
    .text {
        width: 200px;
        word-wrap: break-word;
        border: solid 2px mediumaquamarine;
        padding: 5px;
        text-align: center;
    }
</style>

<div class="text">
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
</div>

CSS ตัดคําขึ้นบรรทัดใหม่ จากตัวอย่างข้อความ ก-ฮ ไม่มีเว้นวรรค บ่อยครั้งการแสดงผลจะทะลุ หรือเกินขอบ div แนะนำให้ใช้คำสั่ง word-wrap: break-word สำหรับการตัดคําขึ้นบรรทัดใหม่ ด้วยภาษา CSS