คุณสมบัติ text-overflow ใช้ใน CSS3 เพื่อกำหนดว่าเนื้อหาที่ล้นที่ไม่ได้แสดงนั้นส่งสัญญาณไปยังผู้ใช้อย่างไร
ต่อไปนี้เป็นรหัสสำหรับจัดการข้อความล้นใน CSS3 -
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { white-space: nowrap; width: 100px; overflow: hidden; border: 1px solid #3008c0; margin: 10px; padding: 10px; } .clip { text-overflow: clip; } .ellipsis { text-overflow: ellipsis; } </style> </head> <body> <h1>Handling text overflow example</h1> CLIP: <div class="clip"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae. </div> ELLIPSES: <div class="ellipsis"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae. </div> </body> </html>
ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -