CSS Line-Wrap Control for Textarea Form Fields

Once upon a time, before today's standards, the textarea form field behaved differently depending on the browser.

There were wrap="off" and wrap="hard" attributes to tell the browser never to wrap a line within the textarea field unless the user types a linefeed. If a line extended past the right-edge of the visible textarea field, the browser presented a horizontal scrollbar.

The wrap="soft" and wrap="virtual" attributes could be used to tell the browser to wrap lines that would otherwise extend past the right content edge of the textarea field box.

The availability of both the "don't wrap" and "do wrap" attributes was needed, back then, because a designer could not be certain which was default for the several browsers available to users — or what the browser might change with it's next update.

The attributes were for aesthetics, how the content looked within the textarea field box. When the form was submitted, it didn't matter whether the browser wrapped the content within the textarea field, the same data was sent to the server.

How it looked, how the text in the textarea field box was presented, sometimes was very important.

Much programming code, for example, is line-break sensitive. When presented within the textarea field box, the lines must be intact. Other content, poems for example, also needs to have consistent lines.

The above attributes are unlikely to work in the latest versions of browsers. Some might recognize the old attributes for backward compatibility. But certainly not all of them.

A CSS Solution

CSS can be used to tell current browsers to keep lines intact within the textarea field box. The CSS is white-space:pre; and can be inline or specified in a style sheet. It has the effect that the wrap="off" and wrap="hard" attributes used to have.

The default for current browsers is to wrap lines that would otherwise extend past the right content edge of the textarea field box. The wrap="soft" and wrap="virtual" attributes are no longer needed.

As with earlier versions, the same content is sent to the server whether or not the white-space:pre; CSS is used.

(A Nice Data Dump is a PHP script with the purpose of showing what data it received. A person can temporarily change the form tag's action attribute to use the data dump script. It is right handy for testing various versions of form fields.)

Examples

Of these two form fields, the first has no line-wrap related CSS. The second has white-space:pre; CSS. The scrollbars appear as needed.

This is the source code of the above example.

<textarea style="height:75px;">
Once upon a time a big blue fox rode an elephant from the north fresh-water sea to the east salty sea, and then let the elephant go free.
</textarea>

This second example field does have the white-space:pre; CSS to keep the line from wrapping.

This is the source code of the above example.

<textarea style="white-space:pre; height:75px;">
Once upon a time a big blue fox rode an elephant from the north fresh-water sea to the east salty sea, and then let the elephant go free.
</textarea>

For current browsers, then, apply the white-space:pre; CSS to textarea field boxes when you want the browser to refrain from wrapping the lines.

Omitting the CSS will let the browser wrap the lines as it sees fit.

(This article first appeared in Possibilities newsletter.)

Will Bontrager