TIP : เทคนิคการใช้งาน CSS เพื่อ "ตัดคำ"

[thatsawan]

ในเทคนิคนี้เหมาะสำหรับผู้พัฒนา CSS ที่มีปัญหาเรื่องข้อความยาวเกินกรอบทะลุออกไป อาจจะรวมถึงลิงค์ที่มีความยาวเกิน ซึ่งความจริงมันไม่มี คำสั่งตรงๆในการใช้งานเพื่อตัดคำ เเต่เราสามารถผสมผสานคำสั่งของ CSS แต่ละตัวเพื่อใช้งานในเเบบที่เราต้องการได้เช่นกัน

_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS ซึ่งเป็นความรู้พื้นฐานในการพัฒนา JavaScrip, JQuery หรือเเม้กระทั้ง Ajax ต่อไป ทั้งนี้สามารถดูรายละเอียด TIP ต่างๆ ได้ที่นี่ค่ะ เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับโดยสามารถศึกษาได้จากบทเรียน CSS ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________

2015-03-11_22-33-57.png (50.16 KiB) Viewed 939 times

โดยปกติข้อความหรือลิงค์ต่างๆที่ส่งมาจาก Server มันสามารถใช้ฟังก์ชั่นตัดคำได้อยู่เเล้ว เเต่ถ้าในกรณีนี้ server ส่งมาเเบบข้อความเต็ม เเล้วมันดันทำให้หน้าเว็บของเราไม่สวยงาม จะมีขั้นตอนในการแก้ไขได้ดังนั้นค่ะ

2015-03-11_22-35-40.png (81.07 KiB) Viewed 939 times

เทคนิคที่ 1 : ให้เราใช้คำสั่งให้ข้อความยาวออกด้านข้าง ทะลุออกไปเลย

โค้ด: เลือกทั้งหมด

white-space: nowrap;

2015-03-11_22-37-05.png (81.67 KiB) Viewed 939 times

เทคนิคที่ 2 : ข้อความที่ทะลุออกไปให้เราทำการซ่อนโดยใช้คำสั่ง

โค้ด: เลือกทั้งหมด

overflow: hidden;

เทคนิคที่ 3 : ตกแต่งข้อความสะหน่อยว่า เรามีข้อความต่ออีกนะไม่ใช้ตัดหายไปดื้อ โดยใช้คำสั่ง

โค้ด: เลือกทั้งหมด

text-overflow: ellipsis;

เพื่อเป็นการแสดง "..." ต่อท้ายข้อความนั้นเอง