Open In App

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

Last Updated : 26 Apr, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

 



Similar Reads

How to hide text-overflown as ellipsis using dynamic bootstrap cols ?
Various utilities and layouts provided by default in Bootstrap 4 to hide overflown text as ellipsis using dynamic bootstrap cols. Here dynamic bootstrap cols mean columns in row or flex have equal properties even in any numbers. The following approaches will explain it clearly. Approach 1: To hide overflown text as ellipsis using CSS properties.
3 min read
How to Apply an Ellipsis to Multiline Text in CSS ?
In this article, we will see how to apply an ellipsis to multi-line text which can be done using two approaches. Ellipsis refers to three dots and it is the most user-friendly UI modification that lets the user know that there was some more information that is being truncated due to lack of space. Approach: By default, the white-space: nowrap and o
3 min read
How to create a multiline input control text area in HTML5 ?
The HTML &lt;textarea&gt; tag is used to specify a multiline input control text area in HTML5. The &lt;cols&gt; and &lt;rows&gt; attributes specify size of a textarea. Syntax &lt;textarea rows="" cols=""&gt; Contents... &lt;/textarea&gt; The &lt;textarea&gt; tag contains 5 attributes that are listed below: cols: It specifies width of textarea.rows:
1 min read
Vue.js Form Input Binding with Multiline text
Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications. Input Binding is used to sync and maintain the state of form input elements with the corresponding state in javascript. So, Vue.
2 min read
React.js Blueprint Editable text Component Multiline mode
BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. Editable Text Component provides a way for users to provide content that is editable when the user clicks on it. Editable text Component Multiline Mode Properties: multiline: A
3 min read
How to insert text into the textarea at the current cursor position?
To insert text into the textarea/inputbox at the current cursor position we need to get the current position of the cursor. So here the approach to get the current position of the cursor. First, get the current position of cursor with the help of property named as selectionStart on textarea/inputbox.To insert the text at the given position we will
2 min read
Displaying inline and multiline blocks of code using Bootstrap
Bootstrap provides a number of classes for displaying inline and multiline blocks of code. Displaying Inline Code: Inline code should be wrapped in &lt;code&gt; tags. The resulting text will be displayed in a fixed-width font and given a red font color. Note: The &lt; and &gt; tags should be replaced with &amp;lt; and &amp;gt; respectively. Below i
3 min read
JavaScript RegExp multiline Property
The multiline Property property in Javascript is used to specify whether the "m" modifier is set or not. If the "m" modifier is set than this property returns true else false. Syntax: RegexObj.multiline Return Value: It returns true if m modifier is set, else false. Example 1: This example checks if the regular expression contains m Modifier or not
1 min read
How to split multiline string into an array of lines in JavaScript ?
Multiline string in JavaScript means a string having two or more lines. To split a multiline string into an array we need to use split() in our JavaScript code. JavaScript split(separator, limit) Method: The split() function is used to split the data depending upon the attributes we are passing in it. The separator attributes specify that from this
2 min read
Spectre Multiline Tooltips
Spectre Tooltips are quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. It provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. The normal tooltip will try to display the data-tooltip content in a single line, s
2 min read