Reglas de manejo de espacios en blanco HTML
Los "caracteres de espacio en blanco" en HTML incluyen tres tipos: espacio, tabulación y avance de línea (CR/LF).
Sabemos que, de forma predeterminada, los espacios en blanco en el código fuente HTML se muestran como espacios y varios espacios en blanco consecutivos se tratarán como uno solo, o en otras palabras, se fusionarán varios espacios en blanco consecutivos.
Sin embargo, a veces, esperamos que varios espacios consecutivos en el código fuente HTML se puedan representar de manera realista en el navegador web, o necesitamos que los saltos de línea en el código fuente funcionen como saltos de línea reales. Entonces, descubrimos la etiqueta <pre>, que realmente puede restaurar la situación real de los espacios en blanco en su texto interno.
Por lo tanto, a menudo colocamos un fragmento de texto que representa el código de la computadora en la etiqueta <pre>, y mostrarán su propia sangría espacial y efectos de ajuste de línea en el navegador, sin la necesidad de que agreguemos estilos y etiquetas adicionales para controlar la sangría. y saltos de línea.
A medida que nuestra comprensión de CSS continúa profundizándose, descubrimos que todo esto está organizado por el atributo de espacio en blanco. La razón por la que el elemento <pre> es tan mágico es que tiene el estilo predeterminado {espacio en blanco: pre;}.
propiedad de espacio en blanco
El atributo de espacio en blanco en CSS se utiliza para establecer las reglas de procesamiento de caracteres de espacio en blanco de texto, que incluyen: si se deben fusionar caracteres de espacio en blanco, si se deben conservar los saltos de línea y si se debe permitir el ajuste automático de línea. Los diferentes comportamientos de cada valor de atributo se muestran en la siguiente tabla:
lista de valores de atributos de espacios en blanco
| valor del atributo | espacio en blanco | carácter de nueva línea | Ajuste automático de línea | apareció por primera vez en |
|---|---|---|---|---|
normal | unir | descuido | permitir | CSS 1 |
nowrap | unir | descuido | no permitido | CSS 1 |
pre | reservar | reservar | no permitido | CSS 1 |
pre-wrap | reservar | reservar | permitir | CSS 2.1 |
pre-line | unir | reservar | permitir | CSS 2.1 |
( Nota : en CSS1/2, el atributo de espacio en blanco solo se puede aplicar a elementos a nivel de bloque; en CSS 2.1, se puede aplicar a todos los elementos).
Si necesitamos que un elemento contenedor tenga un comportamiento de procesamiento de espacios en blanco similar al elemento <pre>, simplemente configure el estilo {white-space: pre;} para él.
Necesidad de preenvoltura
Primero expliquemos el comportamiento de "ajuste de línea automático" en la tabla anterior. Se refiere al flujo de texto dentro de un elemento que se escribe en la dirección del texto. Cuando el flujo de texto encuentra un límite que limita su extensión continua, se debe ajustar la línea. "No se permite el ajuste de palabras" significa que el flujo de texto desbordará el elemento.
Por tanto, el estilo {white-space:pre;} en ocasiones no cumple con nuestras expectativas. Por ejemplo, en algunas situaciones que no requieren un rigor especial, o al formatear algunos fragmentos de código que no son sensibles a los saltos de línea (como HTML o CSS), no queremos que una línea larga de código en el fragmento de código provoque su elemento contenedor para desplazarse horizontalmente porque es difícil de leer. Esperamos que en este caso el código largo se ajuste automáticamente.
En este momento, al comparar las diferentes características de comportamiento de cada valor de atributo en la tabla anterior, encontraremos que el valor del atributo previo al ajuste se destaca: es exactamente lo que necesitamos.