หน้า 1 จากทั้งหมด 1

Tip CSS : Text Overflow (การแสดงข้อความแบบตัดคำ)

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

    โดยบทความนี้จะอธิบายเกี่ยวกับ CSS Text Overflow (การแสดงข้อความแบบตัดคำ) ยกตัวอย่างโค้ดดังนี้ ต้องแสดงข้อความว่า This is some long text that
will not fit in the box แต่ต้องการตัดคำให้มีขนาดแค่ตามต้องการเท่านั้น

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p.test1 {
        white-space: nowrap;
        width: 200px;
        border: 1px solid #000000;
        overflow: hidden;
        text-overflow: clip;
    }

    </style>
    </head>
    <body>

    <h2>text-overflow: clip:</h2>
    <p class="test1">This is some long text that will not fit in the box</p>

    </body>
    </html>

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

    c1.JPG
    c1.JPG (15.07 KiB) เปิดดู 169 ครั้ง

    รูปแบบโค้ดแบบที่ 2 เป็นการตัดคำให้รู้ว่ามีต่อ (มี ....)

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p.test2 {
        white-space: nowrap;
        width: 200px;
        border: 1px solid #000000;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    </style>
    </head>
    <body>

    <h2>text-overflow: ellipsis:</h2>
    <p class="test2">This is some long text that will not fit in the box</p>

    </body>
    </html>

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

    c2.JPG
    c2.JPG (15.16 KiB) เปิดดู 169 ครั้ง

    รูปแบบโค้ดแบบที่ 3 เป็นการตัดคำเลยแต่สามารถใช้เมาส์ชี้และแสดงข้อความได้


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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.test {
        white-space: nowrap;
        width: 200px;
        overflow: hidden;
        border: 1px solid #000000;
    }

    div.test:hover {
        text-overflow: inherit;
        overflow: visible;
    }
    </style>
    </head>
    <body>
    <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
    </body>
    </html>

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

    c3.png
    c3.png (3.11 KiB) เปิดดู 169 ครั้ง

    รูปแบบโค้ดแบบที่ 4 เป็นการตัดคำเลยแต่สามารถใช้เมาส์ชี้และแสดงข้อความได้ (มี...)


    เป็นการตัดคำเลย ก่อนตัดจะมี ... ต่อท้ายข้อความ สามารถใช้เมาส์ชี้และแสดงข้อความได้

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.test {
        white-space: nowrap;
        width: 200px;
        overflow: hidden;
        border: 1px solid #000000;
    }

    div.test:hover {
        text-overflow: inherit;
        overflow: visible;
    }
    </style>
    </head>
    <body>

    <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

    </body>
    </html>

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

    c3.png
    c3.png (3.11 KiB) เปิดดู 169 ครั้ง



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

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