Responsive pre tag

Question

I simply want to show terminal output on a Webpage. Atm I'm using a pre tag to do that with pre { white-space: pre-wrap; } as you can see upon http://irc.dabase.com/.

My problem is that when I rotate my iPhone6 IOS device, it often doesn't reformat properly. Why is this? Can you offer some good CSS rules to make this use case of showing terminal output on a Webpage better?

Answer 1

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: justify;
}

Here are the rules you need explained step by step:

Select all pre elements (set this to pre#yourID or pre.yourClass to select a specific pre)

pre {

Allow pre to wrap at word breaks and line breaks. Unlike pre-line, pre-wrap will not modify your terminal output at all. pre-line will modify your terminal output by condensing whitespace into one whitespace which could make finding exact phrases difficult or mess with whitespace column formatting! See here

  white-space: pre-wrap;

Make sure that words that go past the end of the element break off instead of being hidden (like links for examples)

  word-wrap: break-word;

This part is optional Justify the text so that it fully fills the line. Spaces become wider but their number is not increased.

  text-align: justify;

}

Optionally, this rule can be fit into a media-query so that it only applies in the mobile version. But I believe there is no harm in applying this rule to all screen sizes by simply omitting a media-query.

In the event that the wider version of your iphone makes your pre rule stop working, you should check to see if there isn't already a media-query in place that is applying a rule to the pre when the screen reaches a certain size.

You can also try intentionally creating a media-query for the wider version, which may re-initialize the styles if there is some kind of bug going on.

For example:

Include rule that applies to smallest possible version

Rule A:

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: justify;
}

Then in addition to rule A include another rule to re-initialize styles at landscape orientation

Rule B:

@media all and (orientation:landscape)
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
        text-align: justify;
    }
}

Answer 2

You can try this to achieve -

pre {
    white-space: pre-line;
    word-wrap: break-word;
}