Get Adobe Flash player

CSS Table text-overflow ellipsis ตัดข้อความทิ้งเมื่อข้อความในตารางยาวเกินไป

เมื่อมีข้อความที่ยาวมาก ๆ ในตารางจนเกิดการเว้นบรรทัดข้อมูลเกิดขึ้นทำให้ข้อมูลในตารางดูไม่เรียบร้อย วิธีแก้ไขปัญหาเราสามารถใช้ CSS Property  text-overflow มาช่วยได้ โดยการกำหนดค่าให้เป็น ellipsis (ตัดข้อความทิ้ง) และใช้ Property white-space กำหนดค่าเป็น nowrap (ไม่ต้องเว้นบรรทัด)

แต่ปัญหานี้ไม่ได้แก้ง่ายขนาดนั้น สาเหตุเพราะตารางใน html นั้นจะมี Property table-layout ที่มีค่าเริ่มต้นเป็น auto (ยืดหยุ่นตามข้อมูล) ก็คือถ้าข้อมูลยาวมากแล้วไม่สามารถเว้นบรรทัดได้ ตารางจะทำการยืดความกว้างของ column นั้นออกไปเพิ่ม ทำให้ text-overflow ellipsis นั้นไม่ทำงาน ดังนี้จึงต้องมีการเปลี่ยน table-layout ของตารางใหม่จาก auto เป็น fixed

ตัวอย่างที่ข้อมูลใน column สุดท้ายมีความยาวมาก

ตัวอย่าง CSS

ดูเพิ่มเติมที่ https://codepen.io/anon/pen/RdrGbX

 

Leave a Reply

Your email address will not be published. Required fields are marked *