当文本超过容器元素时,JavaScript 有什么处理方法?
使用 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>
广告