Wrapping Text Inside Input Type="Text" Element Html/Css

Wrapping text inside input type=text element HTML/CSS

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

Is it possible to wrap text in an input?

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)

HTML input wrap text instead of overflow horizontally

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>

How to break words on an input field so it starts a new line once the width of the field is reached?

const mickey = document.querySelector('#firstname').textContent;

.form-container {  float: left;  width: 100%;}
#firstname {  padding-bottom: 40px;  max-width: 60px;  overflow-y: auto;  overflow-wrap: break-word;  border: 1px solid black;}

    <form class="form-container">      First name:<br>      <div id="firstname" contenteditable="true">Mickey</div>      <br>      Last name:<br>      <input type="text" name="lastname" value="Mouse">      <br><br>      <input type="button" value="Submit" onclick="console.log(mickey);">    </form>

Wrap textarea input around a div

I found this pretty ancient discussion:
Unusual shape of a textarea?

The answer that is given is to use the contenteditable property on a div.

I manage to get this code that seems to be what you're looking for.

<html>
<head>  <title></title>  <meta charset="utf-8" />
  <style>    #wrapper {      width: 500px;      height: 500px;    }        #logo {      width: 100px;      height: 100px;      float: right;      background-color: cyan;    }        .textarea {      width: 100%;      height: 100%;    }        <html><head><title></title><meta charset="utf-8" /><style>#wrapper {      width: 500px;      height: 500px;    }        #logo {      width: 100px;      height: 100px;      float: right;      background-color: cyan;    }        .textarea {      width: 100%;      height: 100%;    }  </style></head>
<body>  <div id="wrapper">    <div id="logo">LOGO</div>    <div class='textarea' contenteditable='true'>HTML</div>  </div></body>
</html>
</style></head>
<body>  <div id="wrapper">    <div id="logo">LOGO</div>    <div class='textarea' contenteditable='true'>HTML</div>  </div></body>
</html>

Wrap line of input tag

Due to the specification, it's not possible to break lines in an input field:

Text with no line breaks

Instead you will have to use a <textarea> (because it is the text input element that is made for line breaks), e.g.:

<textarea rows="10" cols="30"></textarea>

How to wrap text of HTML button with fixed width?

I found that you can make use of the white-space CSS property:

white-space: normal;

And it will break the words as normal text.

How do I wrap text in a pre tag?

The answer, from this page in CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Should I put input elements inside a label element?

From the W3's HTML4 specification:

The label itself may be positioned before, after or around the
associated control.

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

Wrapping Text Inside Input Type="Text" Element Html/Css