- CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
- โดยบทความนี้จะอธิบายเกี่ยวกับ CSS Text Overflow (การแสดงข้อความแบบตัดคำ) ยกตัวอย่างโค้ดดังนี้ ต้องแสดงข้อความว่า This is some long text that
- รูปแบบโค้ดแบบที่ 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
- รูปแบบโค้ดแบบที่ 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
- รูปแบบโค้ดแบบที่ 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
- รูปแบบโค้ดแบบที่ 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
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------