TEXTAREA Wrap Attribute Soft Or Hard

Question

I read w3schools and MDN to learn how the wrap attribute of <textarea> works. I saw a question here that explains the difference between soft and hard wrap but I can't understand it. Can anyone explain this to me in a more simplified way?

Lucey

Answer 1

wrap: hard breaks long words into smaller (in case cols attribute is set - this will be length of smaller words)

Wrap: hard

For example this form will have output WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW W :

<form>
  <textarea cols="10" wrap="hard">
  WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
  </textarea>
  <input type="submit">
</form>

Wrap: soft

With wrap: soft it will have this output (same as value): WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

Wrap: off

Also there is option wrap: off, which means, that nothing will be split to more lines. A scrollbar will be added instead. It has no change to output, which will be like with wrap: soft: WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

<textarea wrap="off">
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
</textarea>

Indusium

Answer 2

Try to play with graphical input. You should notice the difference when the input field size exeeded. For example:

<textarea wrap="hard" cols="20"></textarea>

Will begin new line each 80 chars. Note it's not supported everywhere/

<textarea wrap="soft" cols="20"></textarea>

Will begin new line once displayed width exeeded.
You can also disable line wrap by wrap="off"

Code spinnet to play with (have a look at @Arnav Katyal's answer):
Adding Line Numbers To HTML Textarea

Cuenca

Consider, line wraps are actually not newlines, because not contain \n escape char – Cuenca