วิธีตัดคำหลายบรรทัดฉบับ Frontend
สำหรับ Frontend แล้ว คำสั่งตัดบรรทัดแล้วต่อท้ายด้วย … หรือคำสั่ง ellipsis ใน property ของ text-overflow นั้นน่าจะเป็นคำสั่งที่ต้องเคยผ่านมือกันมาบ้างเพราะเป็นการตัดคำที่มีมาตั้งแต่สมัยแรกๆ ที่เขียน css
แต่หากต้องการตัดคำที่ยาวมากกว่า 1 บรรทัด เป็นไปได้ยากที่จะใส่ … ต่อท้ายบรรทัดล่างสุด (ส่วนมากจะใช้ overflow: hidden; ตัดคำห้วนๆ ไปเลย)
หรืออีกกรณีคือให้ Backend นับ character แล้วต่อท้ายด้วย … ซึ่งวิธีนี้ก็ยังไม่สามารถตัดคำได้อย่างถูกต้อง 100% เนื่องจากการนับตัวอักษรในภาษาไทยและภาษาอังกฤษไม่เท่ากันนั่นเอง
จึงนำมาสู่วิธีแก้ไขที่จะมาแชร์กันค่ะ
วิธีที่ 1 ใช้คำสั่ง line-clamp
คำสั่ง line-clamp ที่มี prop เป็นจำนวนบรรทัดที่ต้องการแสดง เป็นคำสั่งที่เกิดมาเพื่อการนี้เลยค่ะ ซึ่งวิธีการใช้ก็ไม่ยุ่งยาก (ดูตัวอย่างการใช้ได้ที่ https://css-tricks.com/almanac/properties/l/line-clamp/) แถมยังไม่ต้องเพิ่ม js อีกด้วย
แต่ปัญหาที่พบก็คือ อาการแปลกๆ ใน ios เนี่ยแหละค่ะ
จะเห็นว่าใน ios มันมี … ก็จริง แต่มีคำต่อท้ายมาด้วย ความเห็นส่วนตัวเราคิดว่ามันแปลกๆ แล้วก็เสียเวลาที่จะแก้ไขด้วย css ค่ะ จึงนำไปสู่การใช้วิธีถัดไป
วิธีที่ 2 ใช้ npm package
package นั้นมีอยู่มากมายแล้วเราจะใช้ตัวไหนดี!? แน่นอนต้องดูหลายอย่างประกอบไม่ว่าจะเป็นจำนวน forks, Popularity, Quality และ Maintenance ซึ่งเราสามารถเทียบแต่ละ package ได้ที่ web npm trends นั่นเอง
ที่นี้ก็ใส่ชื่อ package ที่ต้องการได้เลยค่ะ (รอบนี้เราจะเน้นไปที่ react package นะคะ)
เพื่อไม่ให้เสียเวลาขอยกตัวอย่าง package ที่เอามาเทียบกันตาม link ด้านล่างค่ะ
ตัวที่เลือกมาก็จะเป็น package ที่ใช้กับ react ทั้งหมดค่ะ
และแน่นอนเราต้องเลือกตัวที่ มีคะแนนสูงที่สุดมานั่นก็คือ react-truncate ค่ะ
ตอนที่เห็น code ในตัวอย่างครั้งแรกนี่ดูแล้วใช้งานง่ายมากเลยค่ะ เลยค่อนข้างมีความหวัง แต่ตอนแสดงผลดันผิดคาดซะนี่
ตั้งใจจะตัด 3 บรรทัดแต่ว่า ผลที่แสดงออกมา 2 บรรทัดแถมยังตัดคำตรงกลางอีก
ลอง test ต่อสรุปว่าจะต้องจัดขนาด font-size และ line-height เพิ่มด้วยจึงจะตัดได้อย่างถูกต้อง การใช้งานค่อนข้าง control style ยากและเสียเวลากับการ test พอสมควรเลย เราจึงตัดสินใจลอง package ต่อมานั่นก็คือ react-lines-ellipsis ค่ะ
ตัวนี้ดูจะมีความหวังค่ะ ลองปรับ font และ line-height ก็ยังแสดงผลได้ถูกต้อง และเรายังสามารถปรับ tag html จาก props.component ให้เป็นตามที่เราต้องการได้อีกด้วยค่ะ
react-lines-ellipsis ฉันเลือกนาย !! ในที่สุดก็มาเจอตัวที่ตอบโจทย์แล้วค่ะ เป็นอันว่าหยุดตรงนี้ที่เธอค่ะ 🤩
จบไปแล้ว (อย่างรวดเร็ว) สำหรับวิธีตัดคำหลายบรรทัดฉบับ Frontend หวังว่าจะเป็นประโยชน์ไม่มากก็น้อย หากเพื่อนๆ มีเทคนิคอื่นๆ สามารถแชร์มาได้เลยนะคะ
สุดท้ายนี้ อย่าปล่อยให้ความนิยมมาทำให้คุณคล้อยตาม ไม่ว่าเราใช้วิธีการไหน ก็ต้องอย่าลืม test ก่อนเสมอนะคะ (ทำไมมาลงเอยแบบนี้หละ 😅)
