Search code examples
csspaddingvertical-alignmentword-wrap

Formatting text within a text box (input field) using .css

I am trying to format text within a text box using .css. Here are the following attributes:

input {type="text"]{

      width:850px;
      height:240px;
      word-wrap:word-break;

}

I want to format the box so when the user types information in it, the text/input is at the top left corner of the box. The text/input also needs to wrap. The word-wrap function above does not appear to work. Please advise.

I've also looked at vertical-align for the alignment of the text.

Please advise if you have suggestions.

Solution

  • textarea tag will do what you want.

    <textarea rows="4" cols="50">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
  natoque penatibus et magnis dis parturient montes, nascetur 
  ridiculus mus. Donec quam felis, ultricies nec, pellentesque 
  eu, pretium quis, 
</textarea>