HTML pre: conservar espacios y ajustar líneas largas

HTML <pre> marca una región de texto preformateada que conserva espacios y saltos de línea. Combínalo con <code> para código fuente y usa CSS white-space: pre-wrap cuando las líneas largas deban ajustarse al ancho disponible.

Diferencia entre pre y párrafos normales

Los párrafos regulares combinan espacios consecutivos y saltos de línea en la fuente según el CSS predeterminado. La etiqueta pre mantiene este espaciado por defecto, lo que la hace adecuada para código con sangría, registros y texto donde el espaciado consistente es importante. La fuente predeterminada suele ser monoespaciada, pero las fuentes y el manejo de espacios se pueden cambiar con CSS.

Se pueden alinear visuales tipo tabla usando espacios, pero esto no proporciona las relaciones reales de filas y columnas de una tabla. Usa el elemento table para datos comparativos, y cuando se transmita significado con espaciado como arte ASCII, proporciona explicaciones que puedan ser comprendidas por lectores de pantalla.

Ejemplo Completo: Conservando Espacios y Manejo de Líneas Largas

Guarda el siguiente documento como pre-demo.html y ábrelo en un navegador. Guarda el archivo en UTF-8, y no se requieren bibliotecas externas. Se han aplicado desplazamiento horizontal y ajuste de palabras por separado a la misma cadena larga.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar espacios y saltos de línea con pre</title>
  <style>
    body { max-width: 40rem; margin: 1rem auto; padding: 0 1rem; }
    pre { padding: 1rem; background: #eef2f4; }
    .scroll { overflow-x: auto; }
    .wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Espacios y saltos de línea</h1>
  <p>one    two
    three</p>
  <pre>one    two
    three</pre>
  <h2>Desplazamiento horizontal</h2>
  <pre class="scroll"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>Ajuste de línea</h2>
  <pre class="wrap"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>Mostrar código fuente HTML</h2>
  <pre class="scroll"><code>&lt;p&gt;Hello &amp; welcome&lt;/p&gt;</code></pre>
</body>
</html>

El primer párrafo se fusiona en una línea de acuerdo con el manejo de espacios predeterminado, y el pre siguiente conserva los cuatro espacios entre las palabras one y two y los cuatro espacios antes de la palabra three. Cuando la pantalla se estrecha, el ejemplo de desplazamiento gana desplazamiento horizontal, y el ejemplo de ajuste rompe incluso palabras largas en la línea siguiente. En el área de visualización del código fuente HTML, <p>Hello & welcome</p> aparece como texto en forma de etiqueta.

El HTML dentro de pre también se interpreta.

Pre no es un elemento que impida la interpretación de HTML. Si escribes una etiqueta <strong> real dentro de él, se aplica el significado de la etiqueta. Para mostrar código HTML como texto, escapa < a < y & a &. El último ejemplo de todo el documento anterior utiliza este principio.

El primer salto de línea inmediatamente después de la etiqueta de inicio de pre es eliminado por el analizador de HTML. Los saltos de línea posteriores y la sangría en el código se conservan, así que verifica la posición inicial real del texto para asegurarte de que los espacios para la alineación del documento no aparezcan en la pantalla. Al mostrar código dinámicamente, puedes insertar la cadena usando textContent en lugar de innerHTML para evitar que sea interpretada como etiquetas.

Cosas a verificar cuando no ocurre el salto de línea automático

Si solo especificas overflow-wrap y mantienes el white-space: pre predeterminado, es posible que no aparezcan los saltos de línea deseados. Para preservar los espacios y saltos de línea al ajustarse al borde de la pantalla, aplica pre-wrap, y para dividir cadenas largas sin espacios, también especifica overflow-wrap. Por el contrario, si necesitas mantener una estructura de una sola línea para el código, mantén pre y proporciona desplazamiento interno con overflow-x: auto.

pre preserva el diseño del texto, y code indica que el contenido es código. Usar ambos juntos no genera automáticamente coloración de sintaxis, y se necesita un resaltador o CSS separado. En lugar de depender de las atributos antiguos width y wrap, ajusta la visualización con CSS. Para condiciones detalladas, consulta las definiciones de pre en el estándar estándar HTML: elemento pre y el documento pre de MDN referencia de pre en MDN.