Responsive pre tag
<p>I <strong>simply</strong> want to <em>show terminal output on a Webpage</em>. Atm I'm using a <a href="https://html.spec.whatwg.org/multipage/semantics.html#the-pre-element" rel="noreferrer">pre tag</a> to do that with <code>pre { white-space: pre-wrap; }</code> as you can see upon <a href="http://irc.dabase.com/" rel="noreferrer">http://irc.dabase.com/</a>.</p>

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

<p><a href="https://i.stack.imgur.com/DHhgq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DHhgq.png" alt="Unresponsive pre tag"></a></p>