wrap

The HTML wrap attribute in the <textarea> element controls how text wraps within the input area when it exceeds the visible width.

wrap attribute

The HTML wrap attribute is used in the <textarea> element to specify how text wraps within the input area when the text exceeds the horizontal space. It is a boolean attribute, so it doesn't need a value; just including it in the <textarea> tag activates its function.

Syntax

index.html
<textarea wrap="soft | hard | off">

Example



index.html
<form method="get">
  <label for="comment">Comment:</label><br>
  <textarea id="comment" name="comment" rows="4" cols="50" wrap="hard">
    This is an example of how text is prefilled in a textarea. Notice how the text wraps according to the cols attribute, and because the wrap attribute is set to "hard", these line breaks will be preserved when the form is submitted.
  </textarea><br>
  <input type="submit" value="Submit">
</form>

Definition and Usage

The wrap attribute determines how text in a textarea should be wrapped when the form is submitted.

Values

  • soft: By default, text wraps visually within the <textarea>, but it's submitted as a single line without line breaks.
  • hard: Like the soft setting, text wraps visually, but in this case, hard line breaks are included when the data is submitted. This is helpful for specific formatting needs.
  • off: Disables text wrapping entirely, resulting in continuous text on a single line. This can lead to horizontal scrolling in the <textarea> and submission without any line breaks, much like the soft setting.

Applies To

The wrap attribute can be applied to the following HTML elements:

Conclusion

The wrap attribute in HTML determines how text wraps inside a <textarea> element when it exceeds the visible area. It provides three settings: soft (default), hard, and off, which control how line breaks are treated upon submission. This attribute is useful for managing text formatting and ensuring correct data submission in forms.