Tip CSS : Word Breaking (การทำให้ text html element ไม่ล้น)

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
pprn
PHP Sr. Member
PHP Sr. Member
โพสต์: 88
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

Tip CSS : Word Breaking (การทำให้ text html element ไม่ล้น)

โพสต์โดย pprn » 11/07/2018 4:46 pm

    CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ


    โดยบทความนี้จะอธิบายเกี่ยวกับ CSS Word Breaking (การทำให้ text html element ไม่ล้น) ยกตัวอย่างโค้ดดังนี้ ต้องแสดงข้อความว่า This paragraph
contains some text. This line will-break-at-hyphens. แต่ต้องการตัดคำให้มีขนาดแค่ตามต้องการเท่านั้น


    รูปแบบโค้ดแบบที่ 1 เป็นการตัดคำแบบตัดเอามาทั้งคำเลย

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p.test1 {
        width: 140px;
        border: 1px solid #000000;
        word-break: keep-all;
    }

    </style>
    </head>
    <body>

    <p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

    </body>
    </html>

    อธิบายโค้ด
      - width: 140px; คือ ความกว้างที่กำหนด
      - border:1px solid คือ การกำหนดให้มีขอบ
      - #000000 คือ สีของกรอบในที่นี้คือสีดำ
      - word-break: keep-all; คือ เป็นการตัดคำแบบตัดเอามาทั้งคำเลย

    ผลลัพธ์แบบที่ 1

    br1.JPG
    br1.JPG (14.67 KiB) เปิดดู 25 ครั้ง

    รูปแบบโค้ดแบบที่ 2 เป็นการตัดคำแบบตัดเลย

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p.test1 {
        width: 140px;
        border: 1px solid #000000;
        word-break: break-all;
    }


    </style>
    </head>
    <body>

    <p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

    </body>
    </html>

    อธิบายโค้ด
      - width: 140px; คือ ความกว้างที่กำหนด
      - border:1px solid คือ การกำหนดให้มีขอบ
      - #000000 คือ สีของกรอบในที่นี้คือสีดำ
      - word-break: break-all; คือ เป็นการตัดคำแบบตัดเลย

    ผลลัพธ์แบบที่ 2

    br2.JPG
    br2.JPG (14.82 KiB) เปิดดู 25 ครั้ง


----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------------------------------------------------------

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน