ตัดคำโดยใช้ CSS text-overflow และวิธีตัดคำหลายบรรทัด

บ่อยครั้ง ที่เราต้องหาทางตัดข้อความให้สั้นลง เพื่อเป็นการควบคุมไม่ให้มันยาวเกินไปจนทำให้ layout เสีย ทางเลือกของเราก็มีหลายทางด้วยกัน ไม่ว่าจะเป็นการตัดคำด้วยภาษาฝั่ง server อย่าง PHP การตัดคำที่ฝั่ง client ด้วย CSS รวมไปถึง Javascript

การตัดคำด้วยภาษาฝั่ง Server นั้น ถึงแม้ว่าเราจะสามารถระบุจำนวนอักขระสูงสุดได้ก็จริง แต่เราก็ไม่รู้อยู่ดีว่า สุดท้ายแล้ว ข้อความที่ตัดออกมานั้นจะยาวแค่ไหน เนื่องจากภาษาไทยมีทั้งสระและวรรณยุกต์ ที่บางตัวไม่ทำให้ความยาวของข้อความเพิ่มขึ้น ยิ่งถ้าข้อความนั้นมีทั้งภาษาไทยกับภาษาอังกฤษปนกัน การกำหนดจำนวนอักขระที่เหมาะสมยิ่งทำได้ยาก นอกจากนั้น วิธีนี้ยังเป็นการตัดเนื้อหาออกจากหน้านั้นจริงๆ ซึ่งจะส่งผลเสียต่อ Responsive Web Design รวมไปถึง SEO อีกด้วย

วิธีที่น่าสนใจกว่าก็คือการตัดคำที่ฝั่ง client ครับ วิธีนี้มีข้อดีตรงที่ เนื้อหาทั้งหมดยังคงอยู่ครบถ้วน เพียงแต่เราใช้ css เข้ามาช่วยซ่อนข้อความที่ยาวเกิน container เท่านั้นเองครับ

Workshop: ตัดคำด้วย CSS

สำหรับการตัดคำด้วย css นั้น ไม่มี property ใด ที่มาทำหน้าที่นี้โดยเฉพาะครับ แต่ถ้าเราอาศัยความสามารถของ property บางอันมาใช้ร่วมกัน เราก็จะสามารถตัดคำได้ตามที่เราต้องการ เรามาเริ่มลงมือตัดคำไปพร้อมๆ กันดีกว่าครับ

โค้ด html

โค้ด css

text-overflow with wrap white-space and visible overflow

จากโค้ดด้านบน จะเห็นว่าข้อความของเรายาวจนล้นออกมานอก container(กรอบสีฟ้า) ซึ่งเราตั้งใจว่าจะให้แสดงแค่บรรทัดเดียว ถ้าปล่อยให้เป็นแบบนี้ อาจทำให้ layout เสียได้ เราจึงจำเป็นต้องตัดข้อความให้สั้นลง

ขั้นตอนแรก เราจะต้องยกเลิกการตัดคำด้วย white-space ด้วยการเพิ่มโค้ดต่อไปนี้ครับ

text-overflow with nowrap white-space

ข้อความของเราจะเหลือแค่บรรทัดเดียว และถูกปล่อยยาวจนล้นออกไปนอกกรอบ เนื่องจากไม่ได้ถูกตัดคำด้วย white-space อีกต่อไป

ขั้นตอนต่อมา ให้เราซ่อนข้อความที่ล้นออกมานอกกรอบ โดยการเพิ่มโค้ดต่อไปนี้ครับ

text-overflow with hidden overflow

จะเห็นว่าข้อความที่ล้นออกมานอกกรอบได้ถูกซ่อนไปแล้วครับ ทีนี้ ให้เราเพิ่ม “…” ต่อท้ายข้อความที่ถูกตัด เพื่อเป็น feedback ให้ users รู้ว่าข้อความนี้ จริงๆ แล้วยังมีต่อ ลองเพิ่มโค้ดด้านล่างนี้ครับ

text-overflow with ellipsis text-overflow

หากเราอยากเปลี่ยนข้อความต่อท้ายจาก “…” เป็นอย่างอื่นก็สามารถทำได้ครับ ให้เราเปลี่ยน value จาก ellipsis เป็นค่าที่เราต้องการ

text-overflow with custom string text-overflow

เพียงไม่กี่ขั้นตอน ข้อความที่เคยล้นออกมานอกกรอบ ก็จะถูกตัดออกจนเหลือแต่ข้อความที่อยู่ในกรอบแล้วละครับ

text-overflow ไม่ได้มีไว้ตัดคำ

นี่คือสาเหตุที่ผมเริ่มต้นบทความด้วย workshop ครับ เพราะเราจะเห็นได้ชัดเจนเลยว่า text-overflow ไม่ได้มีไว้ตัดคำเลย แต่มีไว้สำหรับจัดการกับข้อความที่ถูกตัดไปแล้ว ว่าจะให้แสดงผลออกมาอย่างไร

Values

ค่าที่เราสามารถใส่ให้กับ text-overflow มีอยู่ 3 แบบด้วยกัน ดังนี้

  • clipเป็นค่า default ของ text-overflow ครับ ก็คือตัดไปเลย ห้วนๆ ตามขนาดของพื้นที่ที่ถูกจำกัดไว้
  • ellipsisเหมือน clip แต่จะเพิ่ม “…” ต่อท้ายข้อความที่ถูกตัด
  • “string”เหมือน ellipsis แต่ข้อความที่เอามาต่อท้ายจะเป็น string ที่เราเลือกได้เอง

Browser compatibility

text-overflow สามารถใช้ได้กับ IE6 และ Firefox 7.0 ขึ้นไป ส่วน Chrome, Safari และ Opera สามารถใช้ได้ในทุกเวอร์ชั่นเลยครับ แต่ในส่วนของการใส่ value เป็น string อาจยังไม่สามารถใช้ได้ในบางรุ่น สามารถเข้าไปดูข้อมูลเพิ่มเติมได้ที่ Compatibility table for support of CSS3 Text-overflow

text-overflow ไม่รองรับการตัดคำหลายบรรทัด

จากโค้ดเดิม ให้เราลองเปลี่ยนความสูงของ container จากบรรทัดเดียว มาเป็น 5 บรรทัด และเปลี่ยนมาตัดคำด้วย white-space ตามเดิม ส่วน text-overflow ให้เลือกเป็น ellipsis ดูครับ

text-overflow not work with multi-lines

จะพบว่า text-overflow ยังไม่รองรับการตัดคำแบบหลายบรรทัดครับ เราจะแก้ปัญหานี้ได้อย่างไร?

ตัดคำด้วย Javascript

ผมขอแนะนำ plugin ของ jQuery ตัวนึง ที่จะมาช่วยให้การตัดคำแบบหลายบรรทัดกลายเป็นเรื่องง่ายดาย การใช้งานก็ไม่ยุ่งยาก และยังมี options ต่างๆ ให้ปรับแต่งมากมาย ที่สำคัญคือมันฟรีด้วยครับ

ให้เราดาวน์โหลด jQuery.dotdotdot มาใช้ แล้วใส่โค้ดตามนี้ครับ

ellipsis for multi-lines with javascriptellipsis for multi-lines with javascript worked even resized

เท่านี้ก็เรียบร้อยแล้วครับ หากเราลองขยาย viewport ดู ก็จะพบว่า jQuery.dotdotdot ยังสามารถตัดคำได้อย่างสมบูรณ์อยู่ ซึ่ง options ทั้งหมด เราสามารถเข้าไปดูได้ที่ jQuery.dotdotdot

บทสรุปเกี่ยวกับการตัดคำ

  • การตัดคำทางฝั่ง server จะได้ผลลัพธ์ที่ไม่คงเส้นคงวา และไม่ดีต่อ Responsive Web Design และ SEO
  • การตัดคำด้วย css ต้องพึ่ง overflow (กำหนดเป็นค่าอะไรก็ได้ที่ไม่ใช่ visible)
  • text-overflow ใช้ได้กับข้อความบรรทัดเดียวเท่านั้น (กำหนด white-space ให้เป็น nowrap)
  • text-overflow ไม่ได้มีหน้าที่ตัดคำ แต่มีไว้เพื่อให้เราเลือกว่าจะแสดงผลข้อความที่ถูกตัดแล้วออกมาอย่างไร
  • หากต้องการตัดคำแบบหลายบรรทัดต้องใช้ javascript (jQuery.dotdotdot)
(Visited 23,838 times, 29 visits today)

5 Responses to “ตัดคำโดยใช้ CSS text-overflow และวิธีตัดคำหลายบรรทัด”

  1. aor says:

    สุดยอดดด

  2. Ex Xilent says:

    ขอบคุณมากครับ กำลังหา อยู่ พอ ดี !

  3. Ba'ella Oo says:

    ขอบคุณมากค่ะ ^^

  4. ขอบคุณคับผม หาตั้งนาน (Y)

  5. ถ้าต้องการ 2 บรรทัดละครับจต้องทำยังไง

Leave a Reply