In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > wrap (textarea)

wrap property (textarea)

Browser support:

Specifies or returns the word wrapping behavior.

To manipulate word wrapping rules in other elements see the links of the related section below.

Syntax:

object.wrap;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: wrap

Possible values:

String that sets or retrieves the type of word wrapping.

One of the following values:

hard

Word wrapping is enabled and the submitted text (if the textarea element is in a form element) will contain the inserted line break characters, too.

off

Word wrapping is disabled.

soft

Default. Word wrapping is enabled but the submitted text (if the textarea element is in a form element) will not contain the inserted line break characters.

Default: soft.

Example HTML code 1:

This example illustrates the use of the wrap attribute:

<textarea rows="10" cols="10" wrap="off" style="width:300px">
    The wrap flag is off for this field therefore this line may not be wrapped.
</textarea>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the wrap property:

<head>
    <script type="text/javascript">
        function ChangeWrap (elem) {
            var textarea = document.getElementById ("wrapZone");
            
            // Returns the index of the selected option
            var whichSelected = elem.selectedIndex;

            // Returns the text of the selected option
            var wrapType = elem.options[whichSelected].text;

            if ('wrap' in textarea) {
                    // Internet Explorer
                textarea.wrap = wrapType;
            }
            else {
                textarea.setAttribute ("wrap", wrapType);
            }

            // To solve refresh problems in Firefox, Google Chrome, Safari and Opera
            var nextElem = textarea.nextSibling;
            var paren = textarea.parentNode;
            paren.removeChild (textarea);
            paren.insertBefore (textarea, nextElem);
        }
    </script>
</head>
<body>
    <textarea id="wrapZone" rows="10" wrap="hard" style="width:300px">
        You can change the wrap flag of this field in the selection list below.
    </textarea>

    <select onchange="ChangeWrap (this);" size="3">
        <option />hard
        <option />off
        <option selected="selected" />soft
    </select>
</body>