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.
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.
2 Comentarios
Qué tal.
Es interesante lo que comentas, sin embargo esto trae como consecuencia un salto de línea lo cual dificulta la lectura del código. Hay una opción que nos permite utilizar una barra de desplazamiento, considerando las siguientes propiedades de ccs para la etiqueta pre:
; widht: 999px /* Donde 999 sea igual al width del contenido*/
; overflow:auto /* Si la línea es más larga, pone una barra de desplazamiento, en lugar de expandirse */
Para un ejemplo:
http://amox-blogger.blogspot.com/2006/09/mostrar-cdigo-fuente.htm...
aqui esta el codigo que descubri:
al style lo configuramos para que muestre dentro de una caja div o lo que sea los porcentajes de margen derecho,izquierdo,y top
y dentro del BODY configuramos las fuentes i todo lo demas respecto al texto con “text-align:justify;font-face:arial;font-size:12pt;weigh-font:bold” etc
4 Trackbacks
[...] Por fin!, se acabarón las líneas largas, feas y horribles que nos destrozan el diseñode los comentarios o posts, o cualquier caja que tengamos en nuestro diseño. Dimas, de BlogMundi ha publicado estas maravillosas líneas que nos salvarán de este mal. [...]
Evita las líneas largas al escribir código con CSS…
Las etiquetas
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…
[...] Evita las líneas largas, cuando escribas código, usando CSS. » BlogMundi Tecnica CSS para evitar que el texto o codigo con etiquetas “pre” se salgan de los margenes. Si, si, es muy friki esto. (tags: wordpress css pre text techniques tool howto) [...]
[...] http://www.blogmundi.com/2006/10/05/evita-las-lineas-largas-cuand... (español) http://www.designdetector.com/link/to/ten-common-css-mistakes/ (inglés) http://www.positioniseverything.net/easyclearing.html (inglés) http://www.tutorialtastic.co.uk/page/create_a_tableless_layout (inglés) explica la diferencia de tablas/divs http://www.cleancss.com/ (inglés) recurso para limpiar nuestro css [...]