ละทิ้งโปรแกรมพื้นหลังและ JS และใช้ CSS เพื่อสกัดกั้นข้อความโดยอัตโนมัติ

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-31 01:04:50

การใช้ CSS เพื่อสกัดกั้นข้อความโดยอัตโนมัติไม่จำเป็นต้องใช้โปรแกรมพื้นหลังและ JS ประโยชน์ของการใช้งานคือ: เข้ากันได้กับ IE, Firefox, Opera; ดีสำหรับความสมบูรณ์ของเนื้อหา ดีสำหรับ SEO; สามารถปรับได้ตลอดเวลาในเบื้องหน้า
ข้อเสีย: ไม่สามารถกำหนดความยาวการสกัดกั้นได้โดยอัตโนมัติ เมื่ออักขระสั้นมาก จุดไข่ปลาที่ตามมาจะถูกสร้างขึ้นใน Firefox
นอกจากนี้ เมื่อตั้งค่าความกว้างของการสกัดกั้น ให้ใส่ใจกับการพยายามทำให้การสกัดกั้นข้อความเสร็จสมบูรณ์

เรียกใช้การสาธิต
<!DOCTYPE html สาธารณะ "-//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http //www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>การสกัดกั้นข้อความ css< /title> <style type="text/css"> body{font-size:13px;color:#8c966b;} div{clear:both;width:340px;border:1px solid #333;margin:3px;padding: 3px;} div a{สี:#8c966b;ข้อความตกแต่ง:none;} div a:โฮเวอร์{ตกแต่งข้อความ:ขีดเส้นใต้;} div a{display:block;width:310px;white-space:nowrap;overflow:hidden ;float:left; -o-text-overflow: จุดไข่ปลา; /* สำหรับ Opera */ text-overflow:ellipsis; /* สำหรับ IE */ } div:after{content:"...";padding-left:3px ;font-size:12px;}/* สำหรับ Firefox */ </style> </head> <body> <div><a href="">ใช้ css เพื่อตัดข้อความโดยอัตโนมัติ โดยไม่ต้องใช้โปรแกรมพื้นหลังและ JS ข้อดีของการใช้ </a></div> <div><a href=""> คือมีประโยชน์ต่อความสมบูรณ์ของเนื้อหาและ SEO โดยไม่จำเป็นต้องประมวลผลโปรแกรมพื้นหลัง และความยาวที่จะถูกดักจับ สามารถปรับได้ตลอดเวลาในเบื้องหน้า </a></div> <div><a href="">ข้อเสีย: ไม่สามารถกำหนดความยาวของการสกัดกั้นได้โดยอัตโนมัติ เมื่ออักขระสั้นมาก สัญลักษณ์จุดไข่ปลาที่ตามมาจะถูกสร้างขึ้นใน Firefox ด้วย </a></div> <div><a href="">นอกจากนี้ เมื่อตั้งค่าความกว้างของการสกัดกั้น ควรระมัดระวังในการทำให้การสกัดกั้นข้อความสมบูรณ์ที่สุด</a></div> </body> </html>