La etiqueta HTML <pre> sirve para presentar texto preformateado que conservará el formato de lo que pongamos entre sus etiquetas <pre> y </pre>, conserva los espacios, saltos de línea, etc. Se muestra el texto entre estas etiquetas tal y como se escribe dentro de ellas en el código fuente.
También suele utilizarse comunmente para presentar código fuente en sitios web que funcionan con WordPress, mostrar código fuente, conservando los espacios y demás detalles, sin ejecutarlo claro.
Pero uno de los problemas que se presentan con el uso de <pre> es que al querer mostrar código fuente (como en el caso anterior de WordPress) usando esta etiqueta, algunas líneas se ven demasiado largas, desmoronando y desordenando la estructura de nuestra página web:
Para evitar que <pre> escriba líneas demasiado largas que puedan destrozarnos la estructura de nuestra página web, podemos hacer uso de las hojas de estilo CSS, incluyendo lo siguiente:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Este estilo anterior evitará, en la mayoría de navegadores, las líneas largas derivadas del uso de la etiqueta <pre>.