CODEWITHSUNDEEP
htmlinputword-wrap
Web_Designer
Web_Designer

Reputation: 74530

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

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?

Upvotes: 179

Views: 342501

Answers (5)

Melanie R
Melanie R

Reputation: 19

Yes, you absolutely can. This is the code me and my sister wrote for our website for people to input questions and extra information, and it also has a wrapping text box. There may be some things you'll have to change to make it right for what you are using it for.

<div class="product-form__input">
    <label class="form__label" for="custom-questions">
        Your Question(s) & Additional Info.
    </label>
    <textarea class="field__textarea" required style="border:3px double #121212;" id="custom-questions" form="{{product_form_id}}" name="properties[Your Question(s) & Additional Info.]" rows="3" cols="41">
    </textarea>
</div>

Upvotes: -1

Thiago Macedo
Thiago Macedo

Reputation: 6313

Word Break will mimic some of the intent

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }
<input type="text" value="The quick brown fox jumped over the lazy dog" />

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

Upvotes: 24

Sam Herrmann
Sam Herrmann

Reputation: 6966

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>

Upvotes: 15

alex
alex

Reputation: 490153

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, '').

Upvotes: 108

SeekLoad
SeekLoad

Reputation: 1089

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.

Upvotes: 23

Related Questions