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.
<!-- soft (default): wraps visually, submits without added line breaks --><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.
<!-- hard: wraps visually AND inserts line breaks in submitted value --><!-- cols is REQUIRED for hard wrap to work --><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.
<!-- off: no wrapping, horizontal scrollbar instead --><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/textareaHow 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.
<!-- Suppose cols="20" and the user types: --><!-- "The quick brown fox jumps over the lazy dog" --> <!-- wrap="soft" submits: --><!-- The quick brown fox jumps over the lazy dog --> <!-- wrap="hard" submits: --><!-- The quick brown fox \r\n --><!-- jumps over the lazy\r\n --><!-- dog -->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
wrapattribute 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 thecolsattribute. Ifcolsis missing, the browser treats it assoft.- The
colsattribute 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
wrapattribute is not widely known. Many developers use CSSwhite-spaceandoverflowinstead, 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, butsoftwith CSSwhite-space: preis the standards-compliant alternative.
See Also
<textarea>— the textarea elementdisabled— prevent interaction with form controlsreadonly— non-editable but still submitteddirname— submit text directionality alongside the value