Responsive pre tag

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?

3 Answers

Answers 1

You can try this to achieve -

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

Answers 2

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

You Can Try It Once

Answers 3

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

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

Then include another rule to re-initialize rule at landscape orientation

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

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati