บทความนี้ได้ถูกเรียบเรียงขึ้นใหม่ สามารถอ่านได้ที่ ตัดคำด้วย 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 บรรทัด เท่านั้นค่ะ
ดังนั้นท่านที่ต้องการจัดแบบสองบรรทัดขึ้น ไปคงต้องหาวิธีอื่นมาช่วยจัดการแทนคะ