Wrapping text inside input type=“text” element HTM

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

Word Break will mimic some of the intent

input.break {
    word-wrap: break-word;
    word-break: break-all;
    height: 80px;
}

Answer 2

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; 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 3

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, '').