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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > width (pre)

width property (pre)

Browser support:

Specifies or returns the preferred count of characters for each line in a pre element. If a line is longer than the specified character count, the browser will try to wrap it.

Use the width property together with the whiteSpace style property in Opera. The width property is equivalent to the cols property in Firefox.

For a cross-browser solution, use style properties for similar functionality (see Example 2).

Syntax:

object.width;

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

This property is read/write.

HTML page for this property: width

Possible values:

Integer that sets or retrieves the count of characters.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the width attribute:

<head>
    <style>
        .wrapForPre {
            white-space: pre-wrap;       /* CSS-3 */
        }
    </style>
</head>
<body>
    <pre class="wrapForPre" width="15">The preferred count of characters is 15 for each line. </pre>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates a cross-browser solution instead of the width attribute:

<head>
    <style>
        .wrapForPre {
             white-space: pre-wrap;
             word-wrap: break-word;
             width: 130px;
        }
    </style>
</head>
<body>
    <pre class="wrapForPre">The preferred width is 130px for this field. </pre>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the width property:

<head>
    <script type="text/javascript">
        function SetWidth () {
            var pre = document.getElementById ("myPre");
            var input = document.getElementById ("myInput");
            pre.width = input.value;                    
        }
    </script>
</head>
<body>
    <pre id="myPre" width="30">this        content is the  same    AS you    typed.
    </pre>

    <input id="myInput" type="text" value="50" />
    <button onclick="SetWidth ();">Set PRE width!</button>
</body>