<pre> text wrapping when no need

Question

I have a panel 'mock-up' on a webpage contained within a <div> and a <pre> tag thus:-

<div style="max-width:85ch;">
<pre style="background-color:#0D0D0D;color:Lime;">
...
</pre></div>

The maximum number of characters on any line within these tags is 80 characters, and the max-width is set to 85ch.

What could cause such text to wrap at a point which is not a line break when the web page is wide enough not to force a wrap?

FYI - it's supposed to look this this:-

I thought maybe the failing example was due to the user setting their fonts bigger (using Ctrl++) but it still behaves perfectly when I do that, and only wraps when the size of the browser window is no longer big enough to hold it.

Supplementary question (which might have the same answer). Is there a way to stop it wrapping ever, i.e. even when the size of the web browser is not big enough to contain it?

Solution

Try on the style of the <pre> item white-space: pre;, or item white-space: pre-line;

Comments

[konalion]

Have you tried using white-space: nowrap; in your CSS?

[Morag Hughson]

@konalion - I did not try using nowrap because my understanding of it was "Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line." and I didn't want the first half of that. I just tried it right now and it concatenated all my lines onto one line and removed all the extra spaces so I definitely don't want it! Just tried white-space: pre; however, and I was surprised it actually made a difference. It seems to be the answer to my question. Unsure why white-space: pre; is not the default for a <pre> tag

[gregwhitworth]

I'm not repro'ing the breaking of the "Complete fields. Then press Enter". Mind sharing all of the code for this screen alone in jsbin.com? My suspicion is that you'll want white-space: pre, but that's hard to know without seeing the sequence of whitespace within your code. w3.org/TR/CSS22/text.html#white-space-prop

[Morag Hughson]

I believe I have found the problem thanks to the various hints you guys have provided. I found that the default style for pre included white-space:pre-line, and when I made a new class for this that used white-space:pre, it worked.

[Morag Hughson]

Also, I want to thank @Justin for introducing me to the <kdb> tags (which he used in his edit of my question). I had not been aware of their existence until now! Amazing what you learn on SO!!

[Morag Hughson]

Thanks @DDan. I'm going to accept your answer - my problem was that I had white-space: pre-line; in the CSS for pre. When I made a new class for my panel with white-space: pre; it all worked as I expected it to.

[Morag Hughson]

Thanks @denmch, that may solve my unasked question - i.e. the reason I use max-width:85ch when I have a maximum of 80 characters in each line. Cheers!