Question

I came across an interesting problem today. I have a text email I’m sending from a Web page. I’m displaying a preview and wanted to put the preview in a fixed font retaining the white space since that’s the way the plain text 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 it’s supported in IE7 and FF3 though; I don’t care about IE6 for this as its an admin function and no one 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 at the moment I am using font Courier New (i.e. fixed width) and using a regex on the server side 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

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*/ }