Rendering <pre> text on the printed page 1

[Mike Lewis]

I have a page with a fixed-width container (width is defined in pixels).

I sometimes want to display program code within that container, so I style it with a <pre> tag. That works OK, so long as the lines of code aren't too wide. So I added an overflow:auto rule to the <pre> tag. Now, if a line of code is wider than the container, I get a horizontal scroll bar, which solves the problem.

But I also have a separate style sheet for printing. Obviously, overflow:auto has no effect when printing. The wide lines of code are simply truncated.

Is there any way of dealing with this problem? Any way to display <pre> text on the printed page, without wide lines being truncated? Obviously, this can only work if the lines are wrapped in some way, but I can't see any way of doing that.

Thanks in advance for any suggestions.

Mike



__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips, training, consultancy

 

[darryncooke]

try this

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

covers
Internet Explorer 5.5+
Opera 7
Opera 4-6
Mozilla, since 1999
css-3

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[Mike Lewis]

Darryn,

I didn't know about the white-space or word-wrap properties. Looks like I need to spend more time studying CSS.

Needless to say, your suggestion worked perfectly. Many thanks.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips, training, consultancy

 

[darryncooke]

glad i could help

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services