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

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

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

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

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

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

    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) เปิดดู 23 ครั้ง

    รูปแบบโค้ดแบบที่ 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) เปิดดู 23 ครั้ง

    รูปแบบโค้ดแบบที่ 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) เปิดดู 23 ครั้ง

    รูปแบบโค้ดแบบที่ 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) เปิดดู 23 ครั้ง



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

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

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

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

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

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