IE renders PRE in a single line if "white-space:nowrap"

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Use a PRE and put some code in it
2. set style "white-space:nowrap" to the PRE
3. IE is rendering all the code in the PRE in a single line

(Please include HTML, not just your source code)
see link below

What is the expected output?  What do you see instead?
There should be newlines as in the original HTML

What version are you using?  On what browser?
IE7

Please provide any additional information below.
see http://blog.mikecouturier.com/2009/12/google-street-view-with-google-
maps_27.html for an exmaple

Original issue reported on code.google.com by mikegleasonjr on 28 Dec 2009 at 5:13

[GoogleCodeExporter]

Isn't that correct?

Newlines in white-space:pre tags should be treated as spaces according to my 
reading of the 
CSS2.1 spec.

From http://www.w3.org/TR/CSS21/text.html#white-space-prop :
    nowrap
        This value collapses white space as for 'normal',
        but suppresses line breaks within text.

Original comment by mikesamuel@gmail.com on 30 Dec 2009 at 11:58

[GoogleCodeExporter]

I forgot to mention that <br /> has no effect, hence no line breaks in IE.

Original comment by mikegleasonjr on 31 Dec 2009 at 12:07

[GoogleCodeExporter]

prettify transforms the actual content with <spans> and <brs />, but on IE the 
brak 
lines has no effects... I think it's due to a innerHTML bug: 
http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-
javascript

Original comment by mikegleasonjr on 31 Dec 2009 at 12:09

[GoogleCodeExporter]

Ah.  I think we agree then that

  <pre style="white-space: nowrap">foo
  bar</pre>

should render on one line, but the problem you're seeing is that

  <pre style="white-space: nowrap">foo<br>bar</pre>

also renders on one line when it obviously shouldn't?

And this happens on IE7 and possibly other browsers?

Original comment by mikesamuel@gmail.com on 31 Dec 2009 at 12:20

[GoogleCodeExporter]

Yes exactly.

The problem occurs on IE7 (only IE version tested).

Works on FF3, Chrome, Opera 10

Thanks

Original comment by mikegleasonjr on 31 Dec 2009 at 1:43

[GoogleCodeExporter]

Issue 120 has been merged into this issue.

Original comment by mikesamuel@gmail.com on 19 Jul 2010 at 12:55

[GoogleCodeExporter]

I noticed the same issue, and fixed as follows:

Around line 1087 in prettify.js:

Before:
    var lineBreakHtml = (
        isIE678
        ? (job.sourceNode.tagName === 'PRE'
           // Use line feeds instead of <br>s so that copying and pasting works
           // on IE.
           // Doing this on other browsers breaks lots of stuff since \r\n is
           // treated as two newlines on Firefox.
           ? (isIE678 === 6 ? ' \r\n' : ' \r')
           // IE collapses multiple adjacient <br>s into 1 line break.
           // Prefix every newline with ' ' to prevent such behavior.
           : ' <br />')
        : '<br />');

After:
    var lineBreakHtml = (
        isIE678
        ? (job.sourceNode.tagName === 'PRE'
           // Use line feeds instead of <br>s so that copying and pasting works
           // on IE.
           // Doing this on other browsers breaks lots of stuff since \r\n is
           // treated as two newlines on Firefox.
           ? (isIE678 === 6 ? ' \r\n' : (isIE678 === 7 ? ' <br/>\r' : ' \r')) // CHANGE HERE
           // IE collapses multiple adjacient <br>s into 1 line break.
           // Prefix every newline with ' ' to prevent such behavior.
           : ' <br />')
        : '<br />');

I only tried this in IE7 and IE8, in which it works as expected, but not in IE6.

Original comment by nicholas...@cofunds.co.uk on 20 Jul 2010 at 4:16

[GoogleCodeExporter]

Fixed at issue 108 using Nicholas Curry's patch.

Original comment by mikesamuel@gmail.com on 21 Jul 2010 at 5:08

• Changed state: Fixed

[GoogleCodeExporter]

I'm using the code from 21-Jul-2010 and am still hitting this problem.  
Recieving a single line of text in IE, but works fine in FF, Chrome.  
Navigating to line 1087 shows that I do have the patched code as well.

I am running IE 8.0.7600.16385

Original comment by mjs7...@gmail.com on 28 Jul 2010 at 12:44

[GoogleCodeExporter]

Looks like on IE8, this did the trick for me.  Code below should go on the same 
line that Nicholas Curry edited.

... snip ...
? (isIE678 === 6 ? ' \r\n' :
isIE678 === 7 ? ' <br>\r' :
isIE678 === 8 ? ' <br>' : ' \r')
... snip ...

Original comment by mjs7...@gmail.com on 28 Jul 2010 at 12:53

[GoogleCodeExporter]

Why is tagName being used here, shouldn't the white-space CSS property be used, 
as that way we support code blocks with pre formatting?

Original comment by balup...@gmail.com on 16 Aug 2010 at 1:40

[GoogleCodeExporter]

Because one can't read the white-space CSS property until an element is added 
to the DOM which imposes fairly severe restrictions on clients.

Original comment by mikesamuel@gmail.com on 16 Aug 2010 at 1:49

[GoogleCodeExporter]

Do we *really* need lineBreakHtml = " <br />" on IE8? While this appears to 
render the code properly in IE8, copying the code results in all code copied as 
a single line which is surprising, and bad.

I've removed the special case for IE8 and this results in correct rendering 
plus the code copies correctly too:

<               isIE678 === 7 ? ' <br />\r' :
<               isIE678 === 8 ? ' <br />' : ' \r')
---
>               isIE678 === 7 ? ' <br />\r' : '\n')

The above code means that IE8 will use lineBreakHtml = "\n". When I tested, 
whitespace, newlines and consecutive newlines were rendered and copied 
correctly in IE8 (standards mode).

P.S: IE9 is out there too.

Original comment by schwarze...@hotmail.com on 24 Mar 2011 at 8:40