ตัด text ในพริบตา ด้วย text-overflow

บทความนี้ได้ถูกเรียบเรียงขึ้นใหม่ สามารถอ่านได้ที่ ตัดคำด้วย text-overflow และวิธีตัดคำหลายบรรทัด


ยังคงอยู่กับเรื่องของ css text นะคะ

การเขียน text ใน div หรือ p คอลัมน์ แบบกำหนดความกว้างของ element ไว้ อาจไม่เพียงพอกับคำที่ต้องการจะใส่

ทางโปรแกรมอาจแก้ไขด้วยการนับจำนวน character เพื่อให้พอดีกับความกว้างนั้นๆ แต่บางครั้งก็ยังไม่เพียงพอค่ะ

เพราะการนับอักขระ ของแต่ละภาษา เช่น ไทยกับอังกฤษนั้น ไม่เหมือนกัน

ใน css3 เราสามารถใช้ property ที่ชื่อว่า text-overflow มาช่วยแก้ปัญหานี้ได้ค่ะ

ซึ่ง property นี้มี value หลักอยู่ 2 ค่า คือ

  • text-overflow: clip เป็นการตัด text ที่สิ้นสุดกล่องคะ คล้ายการใช้ overflow:hidden
  • text-overflow: ellipsis คือการตัด text โดยมีการต่อส่วนที่ตัดด้วยจุดจุดจุด ( … )

และไม่ต้องกังวลเรื่อง cross browser เพราะคำสั่งนี้สามารถใช้กับ ie7 up ได้ค่ะ

ส่วนสิ่งที่น่าเสียดายสำหรับ text-overflow นี้คือ จัดการได้กับ text แค่ 1 บรรทัด เท่านั้นค่ะ

ดังนั้นท่านที่ต้องการจัดแบบสองบรรทัดขึ้น ไปคงต้องหาวิธีอื่นมาช่วยจัดการแทนคะ

(Visited 1,074 times, 2 visits today)

Leave a Reply