Todos sabemos que la etiqueta <pre> puede definir texto preformateado y una aplicación común es representar el código fuente de la computadora. El texto encerrado en un elemento previo generalmente conserva espacios en blanco y nuevas líneas, pero desafortunadamente, cuando escribe código dentro de una etiqueta <pre>, si no ajusta manualmente las nuevas líneas, también se conservarán en lugar del salto de línea.
En este momento, puede usar overflow:auto; (cuando el código excede el límite del contenedor, se muestra el cuadro de desplazamiento), pero este método no es adecuado para todos los navegadores principales y algunos navegadores truncarán directamente el contenido excedido.
Dado que no hay muchos lugares donde se usa el código fuente en este sitio, antes no me importaba mucho este problema, un internauta entusiasta informó este problema en QQ, así que cuando cambié el tema esta vez, miré. para una solución y la compartió.
| pre { espacio en blanco: pre-envoltura; /* css-3 */ espacio en blanco: -moz-pre-wrap; /* Mozilla, desde 1999 */ espacio en blanco: -pre-wrap /* Opera 4-6 */ espacio en blanco: -o-pre-wrap /* Opera 7 */ ajuste de palabra: romper-palabra /* Internet Explorer 5.5+ */ } |
Esta solución CSS puede hacer que el texto de la etiqueta previa se ajuste automáticamente. La probé en todos los navegadores que tengo y todos admiten IE6, IE7, IE8, Firefox, Opera, Safari y Chrome.
Sólo se sale de los límites si reduce la ventana a menos de 20 caracteres de ancho.