Thursday, April 14, 2011

how remove wordwrap from textarea

hi there, my simple textarea doesn't show horizontal bar when text overflow, it wrap text for a new line, so how remove wordwrap and display horizontal bar when text overflow ?

god bless!

From stackoverflow
  • Textareas shouldn't wrap by default, but you can set wrap="off" to explicitly disable wrap:

    <textarea name="nowrap" cols="30" rows="3" wrap="off"></textarea>
    

    EDIT: The "wrap" attribute is not officially supported. I got it from the german SELFHTML page (an english source is here) that says IE 4.0 and Netscape 2.0 support it. I also tested it in FF 3.0.7 where it works as supposed.

    EDIT2: If you want to be sure every browser supports it, you can use CSS to change wrap behaviour:

    Using Cascading Style Sheets (CSS), you can achieve the same effect with white-space: nowrap; overflow: auto;. Thus, the wrap attribute can be regarded as outdated.

    From here (seems to be an excellent page with information about textarea).

    Dels : wrap seems not a textarea properties... or maybe it deprecated? http://www.w3schools.com/tags/tag_textarea.asp
    schnaader : Yes, it seems it's unofficial - thanks for the hint, I'll edit my answer.
    StoneHeart : i made a simple html with only textarea and it wordwrap by default ????
    schnaader : What browser are you using?
  • The following CSS based solution works for me:

    <html>
     <head>
      <style type='text/css'>
       textarea {
        white-space: nowrap;
        overflow:    scroll;
        overflow-y:  hidden;
        overflow-x:  scroll;
        overflow:    -moz-scrollbars-horizontal;
       }
      </style>
     </head>
     <body>
      <form>
       <textarea>This is a long line of text for testing purposes...</textarea>
      </form>
     </body>
    </html>
    

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.