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

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.

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

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>

As others have mentioned, you'll have to use a textarea to accomplish this. What I don't think has been explained very well is how to make a textarea act similar to a normal textbox.

You'll want to:

1. Make sure the enter key does not cause new lines to be entered. This can be done by listening to the "keyDown" event and calling "event.preventDefault()" when you detect an enter key has been pushed.
2. If this is part of a form, you'll want to additionally cause the form to be submitted when the enter key is pressed.
3. Auto-expand the textarea as content is added, so all content is visible
4. Remove the textarea resize handles, so it appears more like a textbox

Complete example:

const textareaEl = document.querySelector('textarea');

// 1. Make sure the enter key does not cause new lines to be entered.
textareaEl.addEventListener('keydown', event => {
  if (event.code === 'Enter') {
    event.preventDefault();

    // 2. If this is part of a form, submit it.
    // document.querySelector('form').submit();
  }
});

// 3. auto-expand the textarea to show all lines
// Credit for this solution: https://stackoverflow.com/a/58073583/7696223
const updateHeight = () => {
  textareaEl.style.height = 'auto';
  // You might need to shave off a few px depending on
  // padding and other factors I don't fully understand.
  // Here I'm shaving off 4px.
  textareaEl.style.height = textareaEl.scrollHeight - 4 + 'px';
};
textareaEl.addEventListener('input', updateHeight);
updateHeight();

textarea {
  /* 4. Remove the resize handles */
  resize: none;
  /*
  Ensures a scrollbar doesn't flash before we've
  had the chance to recalculate the height
  */
  overflow: hidden;
}

<textarea rows="1"></textarea>

Update: unfortunately, this only works well on desktop. On mobile, or anything with a touch keyboard, they'll be able to enter a newline without triggering the "keydown" event, so it won't be suppressed. Even if you do find a way to suppress it or auto-strip the newlines, the experience still won't be ideal - it's not great that a newline button shows up on the mobile device's keyboard that doesn't serve any purpose.

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>