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

Question

The HTML shown below,

<input type="text"/>

is displayed in a browser like so:

---

When I add the following text,

The quick brown fox jumped over the lazy dog.

Using the HTML below,

 <input type="text" value="The quick brown fox jumped over the lazy dog."/>

it is displayed in a browser like so:

---

But I would like it to be displayed in a browser like so:

---

I want the text in my input element to wrap. Can this be accomplished without a textarea?

Answer 1

That is the textarea 's job - for multiline text input. The input won't do it ; it wasn't designed to do it.

So use a textarea . Besides their visual differences, they are accessed via JavaScript the same way (use value property).

You can prevent newlines being entered via the input event and simply using a replace(/\\n/g, '') .

Answer 2

Word Break will mimic some of the intent

 input[type=text] { word-wrap: break-word; word-break: break-all; height: 80px; }

 <input type="text" value="The quick brown fox jumped over the lazy dog" />

As a workaround, this solution lost its effectiveness on some browsers. Please check the demo: http://cssdesk.com/dbCSQ

Answer 3

You can not use input for it, you need to use textarea instead. Use textarea with the wrap="soft" code and optional the rest of the attributes like this:

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

Atributes: To limit the amount of text in it for example to "40" characters you can add the attribute maxlength="40" like this: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> To hide the scroll the style for it. if you only use overflow:scroll; or overflow:hidden; or overflow:auto; it will only take affect for one scroll bar. If you want different attributes for each scroll bar then use the attributes like this overflow:scroll; overflow-x:auto; overflow-y:hidden; overflow:scroll; overflow-x:auto; overflow-y:hidden; in the style area: To make the textarea not resizable you can use the style with resize:none; like this:

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

That way you can have or example a textarea with 14 rows and 10 cols with word wrap and max character length of "40" characters that works exactly like a input text box does but with rows instead and without using input text.

NOTE: textarea works with rows unlike like input <input type="text" name="tbox" size="10"></input> that is made to not work with rows at all.

Answer 4

To create a text input in which the value under the hood is a single line string but is presented to the user in a word-wrapped format you can use the contenteditable attribute on a <div> or other element:

 const el = document.querySelector('div[contenteditable]'); // Get value from element on input events el.addEventListener('input', () => console.log(el.textContent)); // Set some value el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'

 div[contenteditable] { border: 1px solid black; width: 200px; }

 <div contenteditable></div>

Answer 5

I know this is old, but no one mentioned this so I thought I would add a reason for wanting this.

If one has a need for storing data into a hidden form field (like a large string), that field can easily be displayed for testing by changing 'hidden' to 'text' and back to 'hidden' when done testing. A textarea cannot. It is a completely different object.

With that said, a textarea can have the css display property set to 'none' to hide it and still allow content to be accessed.