<pre> text wrapping when no need
Try on the style of the
white-space: pre;, or item
Related videos on Youtube
Morag Hughson 6 months
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?
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?
konalion about 5 yearsHave you tried using
white-space: nowrap;in your CSS?
Morag Hughson about 5 years@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 about 5 yearsI'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 about 5 yearsI 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 about 5 yearsAlso, 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 about 5 yearsThanks @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 about 5 yearsThanks @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!