html - getting linebreaks in <pre> tags

Question

I'm creating comment fields which are based on user input into textarea. But when I use <pre> tags I can't tell it to wrap properly inside the comments view.

I'm not stuck on using <pre> tags if there is a better way of doing it. Only reason I chose to use it was to keep linebreaks and whitespaces added by user.

I noticed there is a property called "width" for <pre>, but W3 notes it as deprecated, and it only breaks after so and so many characters, which isn't ideal either. (It also doesn't work with IE at all.)

Any suggestions?

Answer 1

The usual approach is to convert single newlines in the input to “<br />”. (Double-newlines would normally introduce a new “<p>” element.) This doesn't cover multiple-whitespace-runs though; if you need to preserve those, you could replace each two-space sequence with a space and a non-breaking space (' ?', ' xA0', or ' &#160;' as a character reference).

There is a CSS way you can retain literal newlines and whitespaces but still wrap when the line length is too short:

white-space: pre-wrap;

However this CSS 2.1 and CSS 3 property value is not supported cross-browser under its original name. Webkit (Safari, Chrome) picks it up; to get it to work under the other popular browsers, you have to add:

white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;

The ‘word-wrap’ is for IE, which as always has its own way of doing things.