Conseguir que los elementos pre y code no se salgan del contenedor

Por defecto, el contenido de los elmentos <pre> (tipo block) y <code> (tipo inline) no pasa a una nueva línea cuándo su longitud supera a la anchura del elemento contenedor. El contenedor no «envuelve» (wrap) al contenido. Esto se debe a que en estos elementos se preservan las nuevas líneas (newlines) y los espacios en blanco (white-space) tal cuál son y no se generan saltos de línea (linebreaks) cuándo la anchura del contenido supera al contenedor.


En algunas situaciones, los elementos <pre> y <code> son los más apropiados pero se quiere evitar que puedan quedar fuera del contenedor. El siguiente snippet CSS hace precisamente eso, preserve (preservar) y wrap (envolver), de modo que el navegador «preserva» los saltos de línea y los white-space pero «envuelve» al contenido generando un salto de línea si es necesario.

pre, code {
    white-space: pre-wrap; //estandar
    white-space: -moz-pre-wrap; //Firefox
    white-space: -o-pre-wrap; //Opera
    word-wrap: break-word; //IE
}

Resultado

Nota como en la versión con white-space: pre-wrap, se conservan todos los espacios en blanco y el salto de línea original pero el contenido queda envuelto completamente por el contenedor: Ver resultado...