<pre> text wrapping when no need

442

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

Share:
442

Related videos on Youtube

Morag Hughson
Author by

Morag Hughson

Updated on December 04, 2022

Comments

  • Morag Hughson
    Morag Hughson 11 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?

    Example of wrapping

    FYI - it's supposed to look this this:- What it is supposed to look like

    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
      konalion over 5 years
      Have you tried using white-space: nowrap; in your CSS?
    • Morag Hughson
      Morag Hughson over 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
      gregwhitworth over 5 years
      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
      Morag Hughson over 5 years
      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
      Morag Hughson over 5 years
      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
    Morag Hughson over 5 years
    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
    Morag Hughson over 5 years
    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!