Hasta ahora no le había prestado atención, pero tener líneas de código largas que hacen scrolling, quedan tapadas por el menú o quedan feas no es lo mejor para un sitio que suele mostrar código.
La etiqueta <pre> es perfecta para mostrar código, pero no tiene en
cuenta dicha limitación y ni siquiera puedes especificarle que auto-corte
el texto (además que para copiar y pegar no conviene nada los cortes).
Ya había visto en otras ocasiones personas que lo solucionaban de forma
más o menos elegante, principalmente usando un input de formulario que
es lo más fácil pero no es lo más semántico y -- sobretodo -- es un dolor
de muelas cambiar todos los <pre> de casi 1000 entradas a input (y no
vale buscar y reemplazar ya que uso Markdown).
Pero la solución la tenía ante mis narices y no pensé en usarla y eso
que muchos temas (algunos famosos) la usan, hablo del overflow:auto;.
Con ello se hace scroll lateral automáticamente cuando hay líneas demasiado largas, aunque es bueno especificar un width: para forzarlo:
pre { overflow: auto; width: 90%; }
Luego ya, lo demás es cuestión de aplicar estilo, por ejemplo si queremos que también nos haga scroll vertical, aunque yo no lo recomiendo, se puede especificar un máximo de ancho vertical con height.
pre { overflow: auto; width: 90%; height: 50px; }
Con el height a 50px (suponiendo 4 líneas de 12px) todo código con más de 50px de alto (más de esas 4 líneas) mostrará un scroll vertical.
A mí me gusta más ver todo el código sin tener que hacer scroll vertical, a lo máximo scroll horizontal cuando son líneas demasiado largas, pero en casos en los que hay limitaciones de espacio con width y height podemos manejarlo a nuestro gusto.
Comentarios