How to make pre code block 100% responsive in mobile CSS example


In this tutorial, You learn how to make pre code block 100% responsive with css.

This tutorials solves the following things

  • pre tag is not responsive in mobile
  • pre tag should be horizontal scrollable
  • Boostrap pre code block with horizontal scrollable Pre is an html tag used to display code snippets or store the formatted text like line

pre tag is a full form or abbeviates as preformatted html content

pre tag in html example

Pre tag displays the same formatted text in html as well as in browser. Line of text takes available width of the browser.

  • It preservers the line breaks and blank spaces with formatted text
  • used to display code blocks in programming blogs
  • Benefits site owners to debug code
<pre>This is html content displayed on browser using pre tag in html
displayed in second line using pretag
d.</pre>

If there is no enough width and It overflows

By default it displays with below applied styles

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

How to make Pre tag 100% responsive?

100% Responsive means formatted text content should work in mobiles tables and desktops. Display long line of code blocks should display with horizontal scrollbar without layout break.

pre tag takes full space, this will be a problematic when you are viewing the same in small screens like mobile.

When you are viewing in mobile, pre tag should not fail or line break should still works as expected

There are multiple ways we can achieve based on how you want to view pre tag in mobile

using white-space

pre {
   white-space: pre-wrap;
}

With this, Line breaks still works words will not break It breaks the into multiple lines If there is no avialiable space,

How to disable horizontal scrolling in pre tag

pre tag wraps the text by preserving formatted text.

So if you have long line of text, and displaying the same in browser overflows and it adds scrolling by default to make it responsive

If you want to disable horizontal scrollbar, use overflow-x with hidden value

pre{
    overflow-x: hidden ; 
}

And user experience is not good if you disable horizontal scrollbar, So you have to wrap a text in pre tag

Here is an code how do wrap a text in pre tag in html

pre{
 white-space: pre-wrap; 
 max-width:100%;
 height:auto;
 }

Twitter bootstrap pre block horizontal with scrollbar

By default pre tag with bootstrap css display pre text with vertical scrollbar and pre with white spaces

Default It generates following CSS

 pre {
    font-family: monospace;
    white-space: pre;
}

To generate horizontal scrollable

 pre {
    pre {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

Latest version of bootstrap we can apply styles to pre and code tag

Conclusion

You learned pre tag in html example and make it 100% responsive using normal css and bootstrap

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.