การตัดคำด้วย CSS

โดยปกติแล้วเรามักทำการตัดคำดวย PHP ครับ แต่ด้วย CSS3 เราสามารถใช้คำสั่งของ CSS3 ช่วยในการตัดคำแทนได้

ข้อดีของการตัดคำด้วย CSS3
เนื่องจากการตัดคำด้วย PHP การตัดคำจะถูกจัดการมาตั้งแต่ Server ซึ่งแน่นอนว่า ข้อความส่วนหนึ่งจะต้องขาดหายไปเมื่อมองจาก Search Engine แต่ถ้าเราตัดคำด้วย CSS3 ข้อความทั้งหมดจะยังคงถูกส่งมาซึ่งมีผลให้ Search Engine ยังคงเห็นข้อความทั้งหมดอยู่ แต่ CSS จะทำการตัดข้อความส่วนเกินออก เพื่อให้เราเห็นแทน

 white-space: nowrap;

 text-overflow: ellipsis;

 -o-text-overflow: ellipsis;

 -ms-text-overflow: ellipsis;

 overflow: hidden;

width: 150px;

ทดสอบการตัดข้อความด้วย CSS ข้อความนี้เป็นข้อความเต็มนะครับ

white-space: nowrap; เป็นการกำหนดให้แสดงผลข้อความเพียงบรรทัดเดียวครับ
overflow: hidden; เป็นการกำหนดให้ซ่อนการแสดงผลในส่วนเกินครับ
width: 150px; เป็นการกำหนดขนาดพื้นที่ส่วนแสดงผล
text-overflow: ellipsis; เป็นการกำหนดให้เติม ... ต่อท้ายข้อความที่มีความยาวเกินกำหนดครับ (-o- และ -ms- เป็น prefix สำหรับบราวเซอร์อิ่นๆครับ)

จริงๆแล้วการตัดคำจริงๆไม่ได้เกิดจาก text-overflow นะครับ การตัดคำเกิดจากการที่เราบังคับให้บราวเซอร์แสดงผลเพียงบรรทัดเดียว และทำการซ่อนข้อความส่วนเกิน หากตัวอักษรมีความยาวเกินกว่าพื้นที่ที่กำหนด โดยที่ text-overflow ทำหน้าที่แค่จัดรูปแบบข้อความส่วนเกินเท่านั้น

ข้อมูลเพิ่มเติม http://www.w3schools.com/cssref/css3_pr_text-overflow.asp