Retain newlines in HTML but wrap text: possible?

Question

I came across an interesting problem today. I have a text email I'm sending from a Web page. I'm displalying a preview and wanted to put the preview in a fixed font retaining the white space since that's the way the plaintext email will appear.

Basically I want something that'll act like Notepad: the newlines will signal a newline but the text will otherwise wrap to fit inside it's container.

Unfortunately this is proving difficult unless I'm missing something really obvious. I've tried:

1. CSS white-space: pre. This retains white space but doesn't wrap lines of text so they go out the borders on long lines;

2. Styling a textarea element to be read only with no border so it basically apepars like a div. The problem here is that IE doesn't like 100% heights on textareas in strict mode. Bizarrely it's OK with them in quirks mode but that's not an option for me.

3. CSS white-space: prewrap. This is CSS 2.1 so probably not widely supported (I'm happy if its IE7 and FF3 though; I don't care about IE6 for this as its an admin function and noone will be running IE6 that will use this page).

Any other suggestions? Can this really be that hard?

edit: can't comment so more info. Yes atm I am using font Courier New (ie fixed width) and using a regex on the serverside to replace the newlines with <br> tags but now I need to edit the content and it just strikes me as awkward that you need to strip out and add the <br>s to make it work.

is there no better way?

Answer 1

Maybe you could use a RichTextEditor (such as FreeTextBox) to display the text.

Set the editor's font to Courier, disable/hide the toolbars, ...

Answer 2

Just replace all your hard line breaks with <br/> and put the text into a div with the desired width. You can do the same with spaces: Replace them with  .

Be sure you do this after you escape the special characters into HTML, otherwise the
are not interpreted but printed on the page.

Answer 3

create a <pre></pre> tag or use something like
<p style="width:800px"> .... </p>

with fixed width, i think text are wrapped

Answer 4

Try replacing any double spaces with    - which should work to make your look of double spaces come through.

Crack all those new line and hard enters out with <br />.

Style the text output to make it look like a fixed-width with the font-family:

font-family:monospace;

You may need to size it up properly, something smaller than the surrounding text, but that will give you the look of a PRE, and what a plain text email will look like.

Put it all in a DIV with a fixed with and that could be worth a look.

Answer 5

Try

selector {
  word-wrap: break-word; /* IE>=5.5 */
  white-space: pre; /* IE>=6 */
  white-space: -moz-pre-wrap; /* For Fx<=2 */
  white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3*/
}