Responsive pre tag - html

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;
}

Answer 3

pre {
white-space: pre-line;
word-wrap: break-word;
text-align: justify;
}
You Can Try It Once

Answer 4

This worked nicely for me when I had pre tag inside of a table and code below made pre tag stay responsive to the table column width. Credits to: https://techstacker.com/responsive-pre-tags-css/
pre {
white-space: pre-wrap;
word-break: break-all;
}