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

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

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

User avatar
pprn
PHP Super Hero Member
PHP Super Hero Member
Posts: 565
Joined: 02/07/2018 10:45 am

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

Postby 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 เป็นการตัดคำเลย

    Code: Select all

    <!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) Viewed 2298 times

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

    Code: Select all

    <!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) Viewed 2298 times

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


    Code: Select all

    <!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) Viewed 2298 times

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


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

    Code: Select all

    <!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) Viewed 2298 times



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

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

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 13 guests