I’ve been working on a small web tool for my Arduino projection library project. In attempting to turn off word wrapping for a textarea, I was quickly reminded how fickle textareas can be. I thought I’d post my findings to help out anyone else needing to do the same thing in a cross-browser-friendly manner.

The old way

The old way of turning off word wrap in a textarea was to set the wrap attribute to off:

<textarea wrap="off"></textarea>

This would turn off word wrapping and show a horizontal scrollbar when the text gets too long for the width of the textarea.

While HTML5 retains the wrap attribute, off is no longer an option (only soft and hard, which do not accomplish the desired effect). Therefore, this method is deprecated. It may still work in some browsers but is not guaranteed, since it is not part of the new standard.

The new way

A more cross-browser-friendly way is to simply use the following CSS. This is what I had the most success with (since it also plays nicely with newlines in the text):

textarea {
    white-space: pre;
    word-wrap: normal;
}

Hope it helps! May your text flow endlessly…


html textarea word wrap
PREV NEXT