How to Switch Textarea to Multiline When Overflown with Text in CSS ?

Last Updated : 26 Apr, 2023

In this article, we will see how the textarea can be switched to multiline while the text is overflowing, along with understanding the different ways to accomplish this task along with its implementation. Many times we have seen when users are typing in a textarea, they might not always know how much text will fit into the box. As a result, the text could overflow and become unreadable. To avoid this issue, we can switch the textarea to multiline when it becomes overflown with text. This will automatically create additional lines for users to continue typing. For this, we will implement it in 2 different approaches, which are described below:

Approach 1: Set the height property to “auto”: This will automatically adjust the height of the textarea based on the content, i.e. the element will adapt its height to ensure that the content is displayed correctly.

Syntax:

textarea {
    height: auto;
    overflow: auto;
}

Example: This example illustrates switching the textarea to multiline when overflown with text.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Using Height set to "auto" 
    </title> 
    <style> 
        textarea { 
            width: 100%; 
            height: auto; 
            padding: 10px; 
            font-size: 16px; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            overflow: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <textarea placeholder="Type something..."></textarea> 
</body> 
</html>

Output:

Approach 2: Use JavaScript to add new lines to the textarea when it overflows: In this approach, we will use JavaScript to add new lines to the textarea whenever it overflows with text. We will achieve this by creating a function that will check if the content of the textarea overflows, and if it does, add a new line to the textarea. We will call this function whenever the content of the textarea changes.

Example: This example will add new lines to the textarea whenever it overflows with text, thus making it behave like a multiline textarea.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Using JavaScript to add new lines to 
        the textarea when it overflows 
    </title> 
  
    <style> 
        textarea { 
            width: 100%; 
            padding: 10px; 
            font-size: 16px; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            overflow: hidden; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <textarea placeholder="Type something..."></textarea> 
      
    <script> 
      
        // Get the textarea element 
        const textarea = document.querySelector('textarea'); 
          
        // Add an event listener for input events 
        textarea.addEventListener('input', () => { 
              
            // Check if the content overflows 
            if (textarea.scrollHeight > textarea.offsetHeight) { 
                  
                // Add a new line to the textarea 
                textarea.value += '\n'; 
            } 
        }); 
    </script> 
</body> 
  
</html>