บทความนี้จะ
สอนใช้คำสั่งสำคัญของ
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 เช่น
<!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>
จะได้ผลลัพธ์ดังนี้ครับ
ข้อความจะถูกตัดตามขนาดของ Tag H1 ที่ผมกำหนดขนาดความกว้างเป็น 100 พิกเซล นั้นเองครับ นอกจากนี้เราสามารถเปลี่ยน Tag H1 เป็น Tag HTML อื่นก็ได้ เช่น div,p,span,h2,h3 เป็นต้น
ไม่มีความคิดเห็น :
แสดงความคิดเห็น