使用textOverflow属性可解决文本溢出问题。如果文本溢出包含元素,请添加省略号。
您可以尝试运行以下代码,以了解当文本使用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>