CODEWITHSUNDEEP
csshtml
boop
boop

Reputation: 7788

Is it possible to wrap text in an input?

No - I don't want to use a textarea.

I want to style an text input to basically look like a textarea. Thus I want it to break text instead of extend horizontally.

Why? I want to disallow line breaks in user input and I want to avoid to implement javascript which disallows return, removing line breaks from pasted content and other possible hacks.

Upvotes: 12

Views: 25434

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371113

No. It is not possible to wrap text in an input as a standard feature.

If you manage to hack it, that would be invalid HTML.

HTML5 spec:

4.10.5.1.2 Text (type=text) state and Search state (type=search)

The input element represents a one line plain text edit control for the element's value.

(emphasis mine)

Upvotes: 9

Felix Brandt
Felix Brandt

Reputation: 11

First off, you might want to use a textarea anyway - input was not designed for this.

You can still achieve the desired effect with css.

input {
    word-wrap: break-word;
    word-break: break-word;
    height: 50px;
    width: 100px;
}
<input type="text" value="This line wraps because it is quite long."/>

Fiddle: https://jsfiddle.net/hfvga3cd/

Upvotes: -6

Related Questions