HTML wrap Attribute
Description
The HTML wrap
attribute is used within the <textarea>
element to define how text should be wrapped within the text input area when the user enters more text than can be displayed horizontally. It is a boolean attribute, meaning it does not require a value; simply including it in the <textarea>
tag is sufficient to activate it.
Here's an example of how the wrap
attribute can be used within a <textarea>
element:
<textarea wrap="hard">
This is a long line of text that will wrap according to the boundaries of the text input area.
</textarea>
In this example, the text will be hard wrapped, meaning line breaks will be inserted automatically within the input area when the text reaches its boundary.
Syntax
<textarea wrap="soft | hard | off">
Values
- softThis is the default behavior if the
wrap
attribute is not specified. Text entered in the textarea is visually wrapped to the next line within the textarea box, but the entered text is submitted without any line breaks or wrapping. This means that the text is treated as a single long line unless the user manually enters line breaks. - hardWith this setting, the text is visually wrapped in the textarea similarly to the
soft
value, but it also inserts hard line breaks in the submitted data according to the wrapping in the textarea. This is useful when the server-side processing expects the text input to contain specific line breaks, such as for formatting plain text emails or code blocks. - offThis setting disables automatic wrapping of text entirely, allowing text to continue in a single line within the textarea. This might result in horizontal scrolling within the textarea if the text exceeds the visible width of the box. The text is submitted without line breaks, similar to the
soft
setting.
Applies To
The wrap
attribute can be used on the following html elements.
Example
<form action="formscript.php" 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>
Browser Support
The following table will show you the current browser support for the HTML wrap
Attribute.
Desktop | |||||
12 | 16 | 4 | 12.1 | 6 |
Tablets / Mobile | |||||
18 | 4 | 12.1 | 6 | 1 | 37 |
Last updated by CSSPortal on: 29th March 2024