Page 1 of 1

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

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

_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS ซึ่งเป็นความรู้พื้นฐานในการพัฒนา JavaScrip, JQuery หรือเเม้กระทั้ง Ajax ต่อไป ทั้งนี้สามารถดูรายละเอียด TIP ต่างๆ ได้ที่นี่ค่ะ เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับโดยสามารถศึกษาได้จากบทเรียน CSS ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
2015-03-11_22-33-57.png
2015-03-11_22-33-57.png (50.16 KiB) Viewed 594 times
โดยปกติข้อความหรือลิงค์ต่างๆที่ส่งมาจาก Server มันสามารถใช้ฟังก์ชั่นตัดคำได้อยู่เเล้ว เเต่ถ้าในกรณีนี้ server ส่งมาเเบบข้อความเต็ม เเล้วมันดันทำให้หน้าเว็บของเราไม่สวยงาม จะมีขั้นตอนในการแก้ไขได้ดังนั้นค่ะ
2015-03-11_22-35-40.png
2015-03-11_22-35-40.png (81.07 KiB) Viewed 594 times
เทคนิคที่ 1 : ให้เราใช้คำสั่งให้ข้อความยาวออกด้านข้าง ทะลุออกไปเลย

Code: Select all

white-space: nowrap;
2015-03-11_22-37-05.png
2015-03-11_22-37-05.png (81.67 KiB) Viewed 594 times
เทคนิคที่ 2 : ข้อความที่ทะลุออกไปให้เราทำการซ่อนโดยใช้คำสั่ง

Code: Select all

overflow: hidden;

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

Code: Select all

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