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...
Comentarios