Search code examples
htmltextareaword-wrap

TEXTAREA Wrap Attribute Soft Or Hard

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?

Solution

  • 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>