32

I have an input field, in which a user will enter text inside. When the text becomes too long, the input field extends horizontally instead of dropping down vertically.

I tried adding this CSS:

overflow: hidden;
word-wrap: break-word;

but I had no luck. Any other suggestions on how to accomplish this?

Nat Riddle
  • 928
  • 1
  • 10
  • 24
Xtian
  • 3,535
  • 11
  • 55
  • 91
  • use jQuery as mentioned here: http://stackoverflow.com/questions/8809568/html-javascript-vertically-expand-textbox-when-text-is-too-long – kurifu Feb 16 '12 at 20:10

3 Answers3

21

I think you should use a multiline input field as TextArea:

http://htmlhelp.com/reference/html40/forms/textarea.html

Sample code:

<textarea rows="10" cols="30"></textarea>
Matt
  • 74,352
  • 26
  • 153
  • 180
Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
  • 8
    I would looooove to use a textarea but I am being forced to use an input field. – Xtian Jul 15 '10 at 00:52
  • Well I think that using an input field you can't get this behavior. At least I've never seen that before. That's why TextArea exists for. – Leniel Maccaferri Jul 15 '10 at 00:59
  • 5
    How does one use this without allowing multiline input? My use case is that I want a single line of input but that I want to display it in a fixed horizontal area and wrap if needed. Removing newlines on keyup is an option but it feels hacky. – ehdv Feb 17 '14 at 19:46
  • @ehdv: you can't use a ` – Leniel Maccaferri Feb 17 '14 at 22:16
  • If I do that, I don't know of a way to make it wrap the contents and I'm better off using JS with a `textarea`. – ehdv Feb 18 '14 at 01:18
5

Xtian - You shouldn't have any restriction on where you need to use an <input> or a <textarea>. Just give the text area the same name that you would've used for the input and you'll be fine.

For example, I just replaced

<input type="text" name="reply" />

With

<textarea rows="1" cols="26" name="reply"></textarea>

Much better now.

Kyle Clegg
  • 38,547
  • 26
  • 130
  • 141
  • 2
    This is absolutely not true. This assumes the OP was intentionally avoiding a `textarea` because the form might not submit the text. But there are actually many situations/reasons where you may [be forced to](https://stackoverflow.com/questions/3251661/input-field-wrap-text-instead-of-extending-horizontally/68249913#comment3360566_3251699) use an `input`. For example, [Django Forms](https://docs.djangoproject.com/en/3.2/topics/forms/) pre-renders forms in your HTML files based on your database structure, and gives you hardly any choice on what input types are used. – Nat Riddle Jul 05 '21 at 17:35
0

This is a soultion i found, Just use a hidden input and use a button for the text with a action for the form.

<form method="post" action="nextpage.php">

    <input style="display: none;" name="name" type="text" value=“somedata"></input>

    <button>Some text that you want to wrap but also submit the form </button>

</form>
Splez
  • 1
  • 2
  • This answer is irrelevant to the question. The question was about making an `input` field wrap vertically instead of overflowing horizontally. This answer uses PHP (which the OP made no reference to), focusing on POST forms (which was also unmentioned), solving a very different problem than the OP had. – Nat Riddle Jul 05 '21 at 17:40
  • I removed most mention of php but i used it because thats what i use for forms, how does this not solve the question, This still fixes the issue, it allow the text to drop down vertical in a input field, there is no other way to do this that i could find. – Splez Jul 06 '21 at 20:09
  • I'm confused... you **hid** the input field using `display: none`. There isn't even any place on the page for the user to type, just a giant button. – Nat Riddle Jul 07 '21 at 15:40
  • yeah it supposed to be that the button sumbits data and i used a hidden element to do it, you can add data to input field value and you can post it to another page using action. In the value field of the input, you can also add php and post a var to the next page, this allows the text to wrap and not go outside the element as it normally will, its a html trick, i manage to find. – Splez Jul 08 '21 at 19:47