Wrapping text inside input type="text" element HTML/CSS

wrapping text inside input type=“text” element html/css
text wrap css
textarea
wrap text overflow
button text overflow wrap
text input wrap text react-native
word-wrap
css don't wrap text

The HTML shown below,

<input type="text"/>

is displayed in a browser like so:


When I add the following text,

The quick brown fox jumped over the lazy dog.

Using the HTML below,

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

it is displayed in a browser like so:


But I would like it to be displayed in a browser like so:
I want the text in my input element to wrap. Can this be accomplished without a textarea?

That is the textarea's job - for multiline text input. The input won't do it; it wasn't designed to do it.

So use a textarea. Besides their visual differences, they are accessed via JavaScript the same way (use value property).

You can prevent newlines being entered via the input event and simply using a replace(/\n/g, '').

Wrapping text inside input type="text" element HTML/CSS, The text in a text area with wrap="hard" will contain newlines (if any) when submitted in a form: <textarea rows="2" cols="20" wrap="hard"> At W3Schools you will  The text in a text area with wrap="hard" will contain newlines (if any) when submitted in a form: <textarea rows="2" cols="20" wrap="hard"> At W3Schools you will find free Web-building tutorials.

Word Break will mimic some of the intent

input.break {
    word-wrap: break-word;
    word-break: break-all;
    height: 80px;
}

As a workaround, this solution lost its effectiveness on some browsers. Please check the demo: http://cssdesk.com/dbCSQ

HTML textarea wrap Attribute, Accordions · Side Navigation · Top Navigation · Modal Boxes · Progress Bars · Parallax · Login Form · HTML Includes · Google Maps · Range Sliders · Tooltips Placeholder auto wrap inside a input field. Ask Question I need to put a long placeholder text inside a input numbers, or punctuation marks)" size="30" type

You can not use input for it, you need to use textarea instead. Use textarea with the wrap="soft"code and optional the rest of the attributes like this:

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

Atributes: To limit the amount of text in it for example to "40" characters you can add the attribute maxlength="40" like this: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> To hide the scroll the style for it. if you only use overflow:scroll; or overflow:hidden; or overflow:auto; it will only take affect for one scroll bar. If you want different attributes for each scroll bar then use the attributes like this overflow:scroll; overflow-x:auto; overflow-y:hidden; in the style area: To make the textarea not resizable you can use the style with resize:none; like this:

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

That way you can have or example a textarea with 14 rows and 10 cols with word wrap and max character length of "40" characters that works exactly like a input text box does but with rows instead and without using input text.

NOTE: textarea works with rows unlike like input <input type="text" name="tbox" size="10"></input> that is made to not work with rows at all.

CSS word-wrap property, The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines  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-wor

To create a text input in which the value under the hood is a single line string but is presented to the user in a word-wrapped format you can use the contenteditable attribute on a <div> or other element:

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'
div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}
<div contenteditable></div>

overflow-wrap, The overflow-wrap CSS property applies to inline elements, setting an otherwise unbreakable string to prevent text from overflowing its line box. Is there a way to wrap text in a Text Input control? I have a form which collects Comments from users. Users need to have the ability to enter multiple lines. With Text Input, I did not see the option to wrap text. Should I be using another control ? Thanks --nikil

overflow-wrap, 4 good reasons to wrap both <input type=radio> and <input type=checkbox> However, one pro of wrapping the form element in a label tag is that you can  How to wrap text in Excel automatically. To force a lengthy text string to appear on multiple lines, select the cell (s) that you want to format, and turn on the Excel text wrap feature by using one of the following methods. Method 1. Go to the Home tab > Alignment group, and click the Wrap Text button: Method 2.

Input checkboxes wrapped inside <labels>, When most people want a responsive text input form field they wrap it in a div. There's a more concise way. When you create a text field in Acrobat, set the Options for Multi-line. See attached file for an example of a filed that does and one that does not wrap. Likes

A Responsive Text Input Form Field, Hard: It specifies that the Text in a Textarea is wraps when submitting the form. Example: This Example that illustrates the use of wrap attribute in the Textarea  You can't wrap text in a text input box, so perhaps you should use a textarea.

Comments
  • No, I don't think it can. But why is a textarea not an option?
  • Using a textarea is sometimes not an option because you don't want to allow input of multiple lines of text. Just to wrap a single line of text (Note: They are not the same thing).
  • There is a solution discussed for this exact purpose with the CSSWG for standardization, sadly I can't find the issue though.
  • I found it; github.com/w3c/csswg-drafts/issues/2141
  • @Pekka웃 not that it is relevant, but some reasons include: we cannot use html5 validation on textareas; we cannot use pattern constraints to validate textareas; a textarea is an unnecessary synonym for an input type=text (it is an input that is type text!) which means twice the styling, etc, etc. In short there are many reasons.
  • This doesn't really answer the question of how to collect a single line of input while displaying it wrapped during entry.
  • A major problem with this is that a textarea suppresses the go button on mobile devices.
  • @alex Exactly. So if you want real multiline input, then a textarea is better, but if you just want word-wrapped input, then the css solution is better.
  • I was about to say that <textarea> won't work with things like jQuery's autocomplete, but just change the <input> to <textarea> and that's all that is necessary. Hooray for standards!
  • As said above: Wrapping a line !== a multi-line string. I'm not sure why this is the accepted answer as it doesn't answer the question.
  • I just tested it in Firefox 43.0.4 and it doesn't work however in Safari 9 and Chrome 48 it seems to work: cssdesk.com/dbCSQ
  • Attached demo by @JasonSperske doesn't work for me neither in Firefox 45 not in Chrome 50.
  • The demo works for me in chrome 48 on linux, but the same css in my own page doesn't.
  • Solution became outdated at least from chrome 50 :(
  • Forget about this solution: does not work with Chrome 74/75, Firefox 63/67, Edge 42, IE 11 and UCBrowser 7.0 (but works with GNOME Web 3.28 - AppleWebKit/605.1.15)