wrap

Control how textarea content wraps and how line breaks are submitted with form data. Affects both visual display and the actual value sent to the server.

Overview

The wrap attribute on <textarea> controls two things: whether text wraps visually in the textarea, and whether the browser inserts line breaks into the submitted form value at wrap points.

Applies to: <textarea>

Values

Value	Visual Wrap	Line Breaks in Submission	Notes
`soft` (default)	Yes	No	Most common; wraps for display only
`hard`	Yes	Yes (`\r\n` inserted)	Requires `cols` attribute
`off`	No	No	Horizontal scroll for long lines

Soft Wrap (Default)

Text wraps visually at the textarea boundary, but the submitted value contains only the line breaks the user explicitly typed. This is the default and appropriate for most text input.

<label for="bio">Bio</label> <textarea id="bio" name="bio" rows="4" cols="50" wrap="soft">This text wraps visually at the edge of the textarea, but when submitted the value contains no inserted line breaks. Only line breaks the user explicitly typed are included.</textarea>

Hard Wrap

Text wraps visually and the browser inserts \r\n characters at each visual wrap point in the submitted value. The cols attribute is required — it determines the column width where wrapping occurs.

<label for="address">Mailing address</label> <textarea id="address" name="address" rows="4" cols="40" wrap="hard">When this form is submitted, the browser inserts line breaks at the visual wrap points. The cols attribute determines where wrapping occurs.</textarea>

Key detail: The hard value actually changes the form data. If your server does not expect these inserted line breaks, they may cause formatting issues in stored text.

No Wrap

Text does not wrap at all. Long lines extend beyond the visible area and the textarea scrolls horizontally. This is ideal for code editing or any content where line breaks are semantically meaningful.

<label for="code">Code snippet</label> <textarea id="code" name="code" rows="6" cols="60" wrap="off">const result = someFunction(argumentOne, argumentTwo, argumentThree, argumentFour, argumentFive); // This line does not wrap</textarea>

How Submission Differs

The critical distinction between soft and hard is in the submitted form data, not the visual appearance. Both look the same to the user.

Practical Form Example

Different wrap values suit different types of content within the same form.

<form method="post" action="/submit" class="stacked"> <label for="message">Message (soft wrap)</label> <textarea id="message" name="message" rows="4" cols="50" wrap="soft"></textarea> <label for="preformatted">Preformatted text (hard wrap)</label> <textarea id="preformatted" name="preformatted" rows="4" cols="72" wrap="hard"></textarea> <label for="source">Source code (no wrap)</label> <textarea id="source" name="source" rows="6" cols="80" wrap="off" spellcheck="false"></textarea> <button type="submit">Submit</button> </form>

Accessibility

The wrap attribute does not affect screen reader behavior. The text content is read the same regardless of the wrap setting.
When using wrap="off", ensure the textarea is wide enough to show meaningful content without scrolling. Horizontal scrolling is harder to discover for keyboard-only users.
Always pair <textarea> with a visible <label> regardless of the wrap setting.

Limitations

wrap="hard" does nothing without the cols attribute. If cols is missing, the browser treats it as soft.
The cols attribute uses character units, which do not account for variable-width fonts. The actual visual wrap point may not align precisely with the column count.
The wrap attribute is not widely known. Many developers use CSS white-space and overflow instead, though those do not affect form submission data.
wrap="off" is not officially in the HTML spec (it was in HTML4 but dropped from HTML5). All major browsers still support it, but soft with CSS white-space: pre is the standards-compliant alternative.