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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 19835
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan » 11/03/2015 10:44 pm

ในเทคนิคนี้เหมาะสำหรับผู้พัฒนา 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 593 times
โดยปกติข้อความหรือลิงค์ต่างๆที่ส่งมาจาก Server มันสามารถใช้ฟังก์ชั่นตัดคำได้อยู่เเล้ว เเต่ถ้าในกรณีนี้ server ส่งมาเเบบข้อความเต็ม เเล้วมันดันทำให้หน้าเว็บของเราไม่สวยงาม จะมีขั้นตอนในการแก้ไขได้ดังนั้นค่ะ
2015-03-11_22-35-40.png
2015-03-11_22-35-40.png (81.07 KiB) Viewed 593 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 593 times
เทคนิคที่ 2 : ข้อความที่ทะลุออกไปให้เราทำการซ่อนโดยใช้คำสั่ง

Code: Select all

overflow: hidden;

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

Code: Select all

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

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 2 guests