Responsive code blocks

Question

I have seen many websites with code blocks on my cellphone, but only a few were responsive. If the code lines were to long I couldn't see the rest of the code. I am also now developing a website with code in. How can I make the code blocks responsive? Here is my code.

pre {
    width: 70%;
    font-family: 'Courier New', Courier, monospace;
    background-color: #b3b3b3;
    color: #ededed;
}

Answer 1

One solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.

pre {
    white-space: pre-wrap; //css3
    white-space: moz-pre-wrap; //firefox
    white-space: -pre-wrap; //opera 4-6
    white-space: -o-pre-wrap; //opera 7
    word-wrap: break-word; //internet explorer
}