<input> multi-line capable via CSS

Question

Is there a way to get an <input />-field in HTML to wrap lines if the text is longer than the field using CSS? I don't want to use <textarea /> as I want to avoid users entering hard line-breaks by pressing enter.

Solution 1

No, sorry. <input type=text> is single line by definition. See the W3C document Forms in HTML Documents:

text
    Creates a single-line text input control.

Solution 2

Look at this, http://www.echoecho.com/htmlforms08.htm

The wrap options are the most tricky part of text areas. If you turn wrap off the text is handled as one long sequence of text without linebreaks. If you set it to virtual the text appears on your page as if it recognized linebreaks - but when the form is submitted the linebreaks are turned off. If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks included.

Solution 3

Using Dojo's Dijit TextArea form control, based off TextArea, you can have an input field which begins as a single line and expands as the user adds to it.

See its documentation.

Solution 4

You can't do what you want with CSS alone, but you could use JavaScript to prevent the user from entering line breaks in a <textarea> field.

View more solutions

Comments

[Josh Leitzel]

He wants an input that wraps. That sounds like a textarea to me. He just didn't want the user to be able to enter line breaks, which you could do with JavaScript.