Web Design: <pre> <code>

Have you ever used <pre> or <code> to highlight the actual code on your website or blog and noticed it was cut off due to your website’s limited page width? There is a simple solution. All you need to do is apply style=”overflow: auto;”.

<pre style="overflow: auto;>PLACE CODE HERE</pre>

For Example:
Code:
<pre>PLACE CODE HERE: you will notice that this sentence gets cut off if the code is wider than the page’s width</pre>

Output:

PLACE CODE HERE: you will notice that this sentence gets cut off or runs off the end of the page due to the limited width of the blog section.

Code:
<pre style=”overflow: auto;”>PLACE CODE HERE: you will notice that this sentence does not get cut off, but gets a nice side scroll bar for the user to see the rest of the code</pre>

Output:

PLACE CODE HERE: you will notice that this sentence does not get cut off, but gets a nice side scroll bar for the user to see the rest of the code

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.