HTML wrap Attribute

The HTML wrap attribute controls how text entered into a <textarea> is wrapped when the value is submitted with a form. The standard values are soft and hard, with soft being the default.

Elements That Use the wrap Attribute

The wrap attribute is used with the <textarea> element.

wrap Attribute Value

The wrap attribute is an enumerated attribute with two standard values: soft and hard.

Value	Description
`soft`	Allows text to wrap visually in the control without adding those automatic line breaks to the submitted value.
`hard`	Adds line breaks as needed so the submitted value is wrapped according to the width established by the `cols` attribute.

If wrap is omitted or contains an invalid value, the default is soft.

The soft Value

With wrap="soft", the browser can visually wrap long lines so they fit within the <textarea>, but automatic visual wrapping does not add those line breaks to the value submitted with the form.

<textarea name="comments" rows="5" cols="30" wrap="soft"></textarea>

Line breaks that the user deliberately enters remain part of the textarea value. The soft behavior concerns the additional line wrapping performed automatically by the browser.

The hard Value

With wrap="hard", the browser adds line breaks as needed when preparing the textarea value for submission so lines are wrapped according to the control's character width.

<textarea name="comments" rows="5" cols="30" wrap="hard"></textarea>

This means that automatic wrapping can become part of the value used for form submission rather than being only a visual effect inside the control.

Using hard with cols

When wrap="hard" is used, the cols attribute must also be specified. The cols value establishes the expected maximum number of characters per line and is used when the browser determines where wrapping should occur.

<textarea name="message"
          rows="6"
          cols="40"
          wrap="hard"></textarea>

The cols value must be a positive integer. In this example, the textarea has an expected maximum line width of 40 characters.

Display Wrapping and Submitted Text

The main difference between soft and hard is not simply whether text appears on multiple lines while the user is typing. Text can wrap visually with either value. The difference is whether the browser-generated wrapping is included when the textarea value is prepared for submission.

<textarea name="soft-example" cols="25" wrap="soft"></textarea>

<textarea name="hard-example" cols="25" wrap="hard"></textarea>

With soft, automatic visual line wrapping is not submitted as additional line breaks. With hard, the browser adds line breaks where necessary according to the textarea's character width.

Common Mistakes

Do not assume that wrap="soft" prevents text from wrapping visually. Text can still wrap inside the textarea; the value controls how automatic wrapping affects the submitted text.

Do not use wrap="hard" without specifying the cols attribute. The HTML standard requires cols when the textarea is in the Hard state.

Do not confuse the HTML wrap attribute with CSS text-wrapping properties. The HTML attribute controls how a textarea's value is wrapped for form submission, while CSS properties control the visual presentation of text.

Do not use wrap on ordinary text inputs or other HTML elements. In modern HTML, the attribute is defined for <textarea>.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The wrap attribute on the <textarea> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the wrap Attribute

The example provides two textareas with the same number of columns. The first uses wrap="soft" and the second uses wrap="hard". Enter a long line of text to compare how the controls display wrapping. The important difference between the values occurs when their contents are submitted with a form.

Play in Editor

Summary

The HTML wrap attribute controls how a <textarea> value is wrapped for form submission. The default soft value allows visual wrapping without adding browser-generated line breaks to the submitted value. The hard value adds line breaks as needed according to the textarea's character width and requires the cols attribute.