CSS กับการตัดคำจากประโยค
บทความนี้จะสอนใช้คำสั่งสำคัญของ CSS ที่ผมเพิ่งรู้มาไม่นานนี่เองครับ นึกไม่ถึงว่าการตัดคำหรือตัดข้อความในประโยคจะต้องใช้ในภาษาเซิร์ฟเวอร์ อย่างเช่น PHP หรือ JSP อย่างเดียวซะอีก CSS ก็ทำได้ครับ แต่ยังมีข้อจำกัดอยู่ ซึ่งก็คือ ตัดตามความกว้างของ Tag HTML ที่เรากำหนดเท่านั้น และทำงานเพียงบรรทัดเดียวเท่านั้น เช่น เรากำหนดขนาดของ Tag H1 ให้กว้าง 100px (width:100px) ถ้าข้อความยาวเกินขนาดที่กำหนดคือ 100px มันจะตัดคำที่เกินนั้นออกไป ความจริงแล้วจะเรียกว่า ซ่อนคำมากว่า เพราะพอผมลอง View Code ของเว็บไซต์ดูแล้ว ข้อความยังอยู่ครบครับ เหมือนกับว่าคำที่เกินขนาดนั้นถูกซ่อนเอาไว้ไม่ให้มองเห็นผ่าน Web Browser เท่านั้นเอง ทำให้ไม่มีผลกระทบต่อ SEO เลย เพราะ Google ยังมองเห็นเป็นประโยคเต็มทั้งหมดครับ
เราจะใช้คำสั่ง 3 คำสั่งควบคู่กันครับ คือ white-space:nowrap,text-overflow:ellipsis และ overflow:hidden เช่น
จะได้ผลลัพธ์ดังนี้ครับ
ข้อความจะถูกตัดตามขนาดของ Tag H1 ที่ผมกำหนดขนาดความกว้างเป็น 100 พิกเซล นั้นเองครับ นอกจากนี้เราสามารถเปลี่ยน Tag H1 เป็น Tag HTML อื่นก็ได้ เช่น div,p,span,h2,h3 เป็นต้น
เราจะใช้คำสั่ง 3 คำสั่งควบคู่กันครับ คือ white-space:nowrap,text-overflow:ellipsis และ overflow:hidden เช่น
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS กับการตัดคำจากประโยค</title> </head> <body> <h1 style="width:100px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;"> นี่คือข้อความที่ถูกคำสั่ง CSS ตัดคำตามขนาดความกว้างของ Tag HTML ที่เรากำหนด</h1> </body> </html>
จะได้ผลลัพธ์ดังนี้ครับ
ความคิดเห็น
แสดงความคิดเห็น