Home » Html » Input Field, wrap text instead of extending horizontally

Input Field, wrap text instead of extending horizontally

Posted by: admin November 30, 2017 Leave a comment


I have an input field, a user will write text inside but when the text is to long it just extends horizontally instead of dropping down vertically.

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

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


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


Sample code:

<textarea rows="10" cols="30"></textarea> 


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" />


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

Much better now.

Leave a Reply

Your email address will not be published. Required fields are marked *