Sin categoría

Evita las líneas largas, cuando escribas código, usando CSS.

Las etiquetas <pre> sirven para mantener el formato de lo que escribamos entre ellas, es decir, conservar los saltos de línea, los espacios…, en definitiva, sirven para preformatear el texto.

Suelen utilizarse cuando tienes que escribir código en tu blog o, por ejemplo, con el plugin para WordPress, Code Markup wordpress plugin, que facilita la tarea de incluir código en los posts.

El problema de la etiqueta <pre>, que es perfecta para escribir código, es que a veces las líneas son demasiado largas. En navegadores como IE, estas líneas no respetan la plantilla y suelen desplazar la barra lateral al final de la página.
pre.gif

Para resolverlo tenemos que hacer que el texto entre las etiquetas <pre> quede envuelto (wrapping text). Para ello podemos usar CSS, tan sólo tenemos que añadir lo siguiente en nuestra hoja de estilos:

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+ */
}

Ésto evitará esos problemas en la mayoría de los navegadores.

Via: Longren

About the author

Dimas

View all posts

6 Comments