Wrapping text inside input type text element HTML CSS

Question

The HTML shown below    lt input type  text   gt    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    lt input type  text  value  The quick brown fox jumped over the lazy dog    gt    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

User · Answer

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:

_x000D_

const el = document.querySelector('div[contenteditable]');_x000D_
_x000D_
// Get value from element on input events_x000D_
el.addEventListener('input', () => console.log(el.textContent));_x000D_
_x000D_
// Set some value_x000D_
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'

_x000D_

div[contenteditable] {_x000D_
  border: 1px solid black;_x000D_
  width: 200px;_x000D_
}

_x000D_

<div contenteditable></div>

_x000D_

User · Answer

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    lt textarea name  text  rows  14  cols  10  wrap  soft  gt   lt  textarea gt    Atributes  To limit the amount of text in it for example to  40  characters you can add the attribute maxlength  40  like this   lt textarea name  text  rows  14  cols  10  wrap  soft  maxlength  40  gt  lt  textarea gt  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    lt textarea name  text  rows  14  cols  10  wrap  soft  maxlength  40  style  overflow hidden  resize none  gt  lt  textarea gt    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  lt input type  text  name  tbox  size  10  gt  lt  input gt  that is made to not work with rows at all

User · Answer

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

User · Answer

Word Break will mimic some of the intent  x000D   x000D      input type text            word-wrap  break-word          word-break  break-all          height  80px        x000D   lt input type  text  value  The quick brown fox jumped over the lazy dog    gt  x000D   x000D   x000D   As a workaround  this solution lost its effectiveness on some browsers  Please check the demo  http   cssdesk com dbCSQ

[html] Wrapping text inside input type="text" element HTML/CSS

Examples related to html

Examples related to input

Examples related to word-wrap