ใช้คุณสมบัติ textOverflow เพื่อจัดการปัญหาข้อความล้น เพิ่ม ellipsis หากข้อความล้นออกจากองค์ประกอบที่ครอบ
ตัวอย่าง
คุณสามารถลองรันโค้ดต่อไปนี้เพื่อเรียนรู้ว่าต้องทำอย่างไรเมื่อข้อความล้นออกจากองค์ประกอบที่ครอบด้วย JavaScript −
<!DOCTYPE html> <html> <head> <style> #myID { border: 2px solid blue; background-color: gray; overflow: hidden; text-overflow: visible; width: 200px; white-space: nowrap; } </style> </head> <body> <button onclick = "display()"> Click </button> <div id = "myID"> This is Demo Text! This is Demo Text! This is Demo Text!<br> This is Demo Text! This is Demo Text! This is Demo Text!<br> This is Demo Text! This is Demo Text! This is Demo Text!<br> This is Demo Text! This is Demo Text! This is Demo Text!<br> </div> <script> function display() { document.getElementById("myID").style.textOverflow = "ellipsis"; } </script> </body> </html> 