En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar. Se trata de un caso habitual cuando una página web debe mostrar directamente el texto generado por alguna aplicación.
En estos casos, se puede utiliza la etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas. La definición formal de la etiqueta se muestra a continuación:
El siguiente ejemplo muestra el uso de la etiqueta <pre>:
<html>
<head><title>Ejemplo de etiqueta pre</title></head>
<body>
<pre>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</pre>
<p>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</p>
</body>
</html>
El ejemplo anterior incluye el mismo texto (con espacios en blanco y varias líneas) dentro de una etiqueta <pre> y dentro de una etiqueta <p>. Las diferencias visuales en un navegador son muy evidentes:
El primer texto se ve en pantalla tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas. El segundo texto se ve como un párrafo normal, ya que HTML ha eliminado todos los espacios en blanco sobrantes. Los elementos <pre> son especiales, ya que los navegadores les aplican las siguientes reglas:
▪ Mantienen todos los espacios en blanco (tabuladores, espacios y nuevas líneas)
▪ Muestra el texto con un tipo de letra especial, denominado "de ancho fijo", ya que todas sus letras son de la misma anchura
▪ No se ajusta la longitud de las líneas (las líneas largas producen un scroll horizontal en la ventana del navegador)
Esta última característica diferencia por completo a los párrafos de los elementos <pre>. Como se ha visto, los navegadores ajustan la anchura de los párrafos de texto para que ocupen todo el tamaño de la ventana. Sin embargo, los elementos <pre> se muestran tal y como son originalmente, por lo que una línea muy larga dentro de un elemento <pre> provoca que la anchura de la página sea superior a la anchura de la ventana del navegador.
Si en el ejemplo anterior se añade más texto al final de la segunda línea (para producir una línea larga), el navegador muestra un scroll horizontal ya que el texto completo no cabe en el tamaño de la ventana y las líneas de los elementos <pre> nunca se ajustan.
No hay comentarios:
Publicar un comentario