Truquillo Wordpress: Mostrar código fuente demasiado ancho
En ocasiones queremos mostrar código fuente que “se sale” del área destinada al texto. En esos casos podemos resolverlo modificando en nuestra hoja de estilos la etiqueta “pre” añadiendo el parámetro “overflow”:
pre {
overflow: auto;
}De esta forma el código se muestra dentro de una “cuadro” con una barra de desplazamiento horizontal. Véase un ejemplo:
printf("Este código es demasiado largo para mostrarlo en el área del post y se comerÃa parte del menú de la derecha a no ser que se use este \n"truquillo\"\n");
En Explorer no funciona correctamente asà que hay que añadir el ancho (se puede indicar en pixels o en %):
pre {
overflow: auto;
width: 470px;
}De nuevo el explorer nos da problemas; la barra de desplazamiento quita espacio para mostrar el código en lugar de aparecer bajo el cuadro del código (como sucede en Firefox).
He probado varias soluciones, entre ellas la propiedad min-height, y por ahora la que mejor queda es usar un padding grande, por ejemplo:
pre {
padding: 20px;
overflow: auto;
width: 470px;
}He encontrado este tutorial para establecer una altura mÃnima: CSS min-height hack. Voy a echarle un vistazo a ver qué tal es ésa solución.
Y ya que hablamos del tema… usa Firefox o cualquier otro navegador que respete los estándares.
Loading ...