Wrapping text inside input type="text" element HTML/CSS

html

responsive-design

css

javascript

byAlex Kataev·Mar 14, 2025

An **`<input type="text">`** doesn’t support text wrapping. Instead, utilize the **`<textarea>`** element for multi-line input:

```html
<textarea rows="4" cols="50">Enter text here...</textarea>

To customize its dimensions without restriction, use CSS. Alternately, use a <div contenteditable="true"> to create a styled, editable area:

<div contenteditable="true" style="border: 1px solid; width: 200px; height: 100px; overflow: auto;">
  Editable text here...
</div>

These elements support text wrap functionality.

Deep Dive into Text Wrapping Techniques

This section will explore the nuances of how to provide multi-line input or text wrapping solutions beyond basic input type="text".

Text Wrapping with `<textarea>`

<textarea> is designed to handle multi-line input. With CSS, align it to your form's aesthetics and control the user's experience:

/*Keep your textarea within the lines ⛔️ */
textarea { 
  resize: none;
}

Apply attributes like resize: none; in CSS to stop manual resizing, use wrap="soft" to enable soft breaks, and set maxlength to limit the character count.

Flexible overflow with `contenteditable`

An alternative solution is <div contenteditable="true">. This provides a styled, editable area. Configure its appearance using CSS properties: width, border, and height. Capture text changes using event listeners. Manage content with the textContent property in JavaScript.

Stuff Gentlemen Prefer: `<textarea>` or Editable `<div>`?

These elements could offer solutions for text wrapping but have their best use scenarios:

<textarea> for form submissions and plain text processing.
Editable <div> for WYSIWYG editors & rich text processing.

Each cross-browser tested to ensure consistency and eminence.

Making Editable `<div>` Disguise as an Input

Using CSS, shape your editable <div> to appear like an input:

Use border to mimic the input box's outline,
Add padding to control inner spacing,
And select matching font-family and font-size to keep the style consistent.

How about some JavaScript to sanitize the content? For instance, stripping newlines or disallowing certain characters to keep your <div> clean.

Knocking it up with Interactions

Beyond mere typing, explore more interaction features:

Suggestions while typing using datalist with <input>.
Input masking with JavaScript libraries for complex typed patterns.
Ensuring accessibility with aria-label or aria-labelledby to give an inclusive touch.