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

Word Break will mimic some of the intent

_x000D_

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }

_x000D_

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

_x000D_

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

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

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  lt div gt  or other element    x000D   x000D  const el   document querySelector  div contenteditable     x000D   x000D     Get value from element on input events x000D  el addEventListener  input        gt  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   lt div contenteditable gt  lt  div gt  x000D   x000D   x000D

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

Examples related to html

Examples related to input

Examples related to word-wrap