How to force <pre><code> not to extrude beyond the screen or container width?

If you ever want to include a block of HTML, CSS or Javascript codes to your webpage, you will encounter this problem. By default <pre> will only break a line if it is added in the HTML code, otherwise, it will extend before the container width, thus breaking the layout, especially in responsive website design (RWD).

We can force the code inside <pre> to break according to the container width / screen width by adding the following code to the CSS file:

    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, post millennium */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */



Please login to post comments.

Login thru Twitter / Facebook


Log in with Facebook