Teach with us

What is to be done when text overflows the containing element with JavaScript?

Use the textOverflow property to counter the text overflow issue. Add ellipses if the text overflows the containing element.

Example

You can try to run the following code to learn what is to be done when text overflows the containing element with 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>
Updated on 23-Jun-2020 11:36:08

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements