html textarea injecting line breaks - html

Question

I've got a weird problem.
I have an html textarea, with the cols set to 84, like so:
<textarea id="caseNote_note0" class="txtArea" name="caseNote_note" style="line-height: 1.1em; height: 5em;" wrap="hard" rows="10" cols="84" tabindex="7">blah blah blah</textarea>
The txtArea class is defined as:
.txtArea {
font-family:arial,sans-serif;
font-size:1.0em;
width:99%;
rows:10;
overflow:hidden;
border:none;
font-family:arial,sans-serif;
margin: 0px 3px 0px 3px;
}
The textarea is stretched across almost the whole screen.
When the user types in data, the data all appears in the textarea as you would expect.
However, when you submit the form, the text looks like its been saved with line breaks injected into it.
i.e.
before the save:
-------------------------------------------------------------------------------
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
-------------------------------------------------------------------------------
after the save:
-------------------------------------------------------------------------------
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
-------------------------------------------------------------------------------
If I change the cols to be greater than 84 (say 150), the linebreaks appear later (i.e. more text shows before a line break seems to get enetered).
The text is also being saved in the database table with these apparent mystery line breaks.
A wordaround is to set the cols to something really high (like 500), then I guess I wouldn't run into this problem....but I'd rather know why this is happening in the first place.
Any help is appreciated!
Cheers
Jarrett

Answer 1

Remove the wrap attribute. It’s unneeded.

Answer 2

Your problem is caused by the wrap="hard" attribute in the HTML. You can change it to wrap="soft" to wrap the lines on screen but not include them into the submitted data. Alternatively you can change it to wrap="off" to turn wrap off completely - textarea will then include a horizontal scrollbar.
Here's one page describing this in details (this one is from Microsoft), but searching the web for textarea wrap will give you loads more.