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

You could display the pre elements with overflow:auto like here on SO:

<pre style="overflow:auto">Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</pre>

But the pre element is just intended for preformatted text like source code or plain text documents. Thus you should better add HTML line breaks (br element) or even paragraphs (p element).

Answer 2

Check out the CSS overflow attribute. It can add scrollbars to allow viewing of the content wider than your container.

Gumbo has an example posted.

Answer 3

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.