Input Field, wrap text instead of extending horizontally

html css input text word-wrap
Xtian picture Xtian · Jul 15, 2010 · Viewed 59.1k times · Source

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?

Answer

Leniel Maccaferri picture Leniel Maccaferri · Jul 15, 2010

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>

Related questions

Add padding to HTML text input field

I want to add some space to the right of an <input type="text" /> so that there's some empty space on the right of the field. So, instead of , I'd get . So, same behavior just some empty space …

Read More
Changing the highlight color when selecting text in an HTML text input

I've been looking for this throughout the web and can't even find anyone else even asking this, let alone a solution... Is there a way to change the color of the highlight area within a text input when text is …

Read More
Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More