Question 43483 in Html Question posted in
Some basic documentation can be found here.

How to put a linebreak after the User Input has reached the end of a Textbox? – Html

I know this question has been asked but I cant find the solution to it.

This is my tag :

<input type="text" id="userText" class="userTextBox">

and this is my css :

  .userTextBox {
    /* Add some margin below the input element */
    margin-bottom: 20px;
    width: 500px;
    height: 100px;
    overflow-wrap: break-word;
  }

but overflow-wrap or word-wrap dont work.

I tried overflow-wrap,word-wrap and word-break. But they dont work.

Tags:

2

Answers


  1. 0

    <input> is an inline element and as such also only allows a single-line text. If you need a multi-line text input you need a block-level input which is called textarea. It does exactly what you try to do by default:

    .userTextBox {
  width: 500px;
  height: 100px;
  
  /* disables the default resize ability */
  resize: none;
}
    <textarea id="userText" class="userTextBox"></textarea>
    Login or Signup to reply.
  2. 0

    <input> is a single line text input.
    But <textarea> is a multiple line.

    Here you only need to change the to in html.

    <textarea id="userText" class="userTextBox"></textarea>

    And in css remove overflow-wrap: break-word; and if you don’t need to add the feature to resize, you can add resize: none;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search