ตัดคำแล้วต่อด้วย … (dot dot dot)

เรามักจะเจอเว็บไซต์ที่แสดง Teaser แบบเป็น grid เป็น card บางทีการจะนำเนื้อหาทั้งหมดอยู่ในกล่องเดียวมันจะยาวมากๆ
จึงมีความจำเป็นต้องตัดเนื้อหาบางส่วนออกไป แล้วเพิ่ม ‘…’ มีลิงก์คลิกไปอ่านต่อในหน้าเนื้อหาแทน

ตัวอย่างการใช้ ... ใน Pinterest
ตัวอย่างการใช้ … ใน Pinterest

มีวิธีทำอยู่หลายทาง แต่ละทางก็มีข้อดีข้อเสียแตกต่างกันไป ซึ่งที่เราใช้บ่อยๆ จะมี 2 แบบ

วิธีแรก ใช้ Pure CSS โดยใช้  property text-overflow

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

วิธีนี้จะตัดข้อความยาวๆ ให้เหลือ 1 บรรทัด และเพิ่ม ‘…’ ต่อท้าย
ก็เคยสงสัยว่า Pure Css เฉยๆ มันสามารถ ตัดข้อความให้เหลือมากกว่า 1 บรรทัด แล้วต่อด้วย … ได้มั้ย
ก็พบว่า มันทำได้ เขาใช้ property -webkit-line-clamp แต่ปัจจุบันก็ยังไม่ Support Firefox, IE, Microsoft Edge, Opera Mini
ลองไปดูตัวอย่างการใช้ -webkit-line-clamp ที่นี่ได้ https://codepen.io/martinwolf/pen/qlFdp

วิธีสอง ใช้ jquery dot dot dot 

ตัว plugin dot dot dot สามารถกำหนดได้ว่าเราจะตัดคำกี่บรรทัด โดยการใช้ CSS กำหนด property height หรือ max-height
หรือ ตั้งค่าใน configuration options ของ plugin ตัวนี้ก็ได้
คลิกเพื่อไปพบ jQuery dot dot dot

ตัวอย่างการใช้ dot dot dot เบื้องต้น

เราได้ลองใช้งาน jQuery dot dot dot ในการทำงาน และพบว่ามัน flexible มากๆ
กรณีที่อยากให้ Text ยาว 4 บรรทัด ใน Desktop, 3 บรรทัดใน Laptop, 2 บรรทัดใน Tablet หรือ 4 บรรทัด ใน mobile
ก็สามารถ CSS กำหนด height ของ element นั้นๆ ตาม media query ได้เลย

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.