Para aplicar sangría francesa a entradas con ajuste de línea separadas por etiquetas <br>, aplica text-indent: 2em hanging each-line al contenedor de bloque. Comprueba que se admitan ambas palabras clave; si necesitas compatibilidad con navegadores antiguos, coloca cada entrada en su propio bloque y usa relleno con una sangría negativa.

Esta guía está dirigida a quien edita una pequeña página HTML en un Mac y quiere que cada entrada empiece alineada con el borde izquierdo, mientras que sus líneas de continuación queden más hacia dentro. Los ejemplos usan texto sintético y solo requieren un editor de texto sin formato o de código, y un navegador.

Por qué falla la sangría francesa habitual después de una etiqueta de salto

Hay que tener en cuenta dos tipos de final de línea. Un <br> crea un salto de línea explícito. Un ajuste automático ocurre cuando el navegador adapta el texto al ancho disponible. El diseño deseado trata el primero como el inicio de otra entrada y el segundo como una continuación. WHATWG define <br> como un salto de línea; no crea un párrafo nuevo ni un contenedor para una entrada. Estándar HTML: el elemento br.

Un text-indent negativo simple afecta a la primera línea formateada de un bloque. Por tanto, añadir relleno puede crear una sangría francesa para ese bloque, pero no reinicia la sangría hacia fuera después de cada <br>. Las entradas siguientes siguen perteneciendo al mismo bloque. MDN: text-indent.

La especificación CSS define la combinación que se necesita aquí: each-line incluye la primera línea y las líneas que siguen inmediatamente a saltos forzados; hanging invierte esa selección. Juntas, sangran las líneas de continuación ajustadas automáticamente y dejan alineadas con el borde todas las líneas iniciadas explícitamente. W3C: sangría de la primera línea.

El resultado deseado tiene este aspecto. Los finales de línea que se muestran son ilustrativos; el navegador elegirá los puntos reales de ajuste según el ancho disponible y las métricas de la fuente.

La entrada A empieza en el borde exterior y continúa
    hacia dentro cuando se agota el ancho disponible.
La entrada B también empieza en el borde exterior y tiene
    su propia continuación con sangría.
La entrada C es breve.

Elige un método antes de cambiar la página

Usa el marcado existente y los requisitos de los navegadores para elegir cómo proceder. Esta tabla de decisión se basa en el comportamiento documentado de la sangría y en los datos de compatibilidad de los navegadores; es una ayuda de implementación, no una función independiente del navegador.

Tu situación Método recomendado
Los saltos de línea explícitos forman parte de un mismo pasaje de texto y los navegadores compatibles son suficientes Conserva los saltos y usa hanging each-line
Las entradas son párrafos independientes o elementos de lista Da a cada entrada el marcado estructural adecuado
La sangría francesa debe mostrarse en navegadores antiguos Usa un bloque por entrada con relleno y sangría negativa
Solo puedes editar CSS y un navegador antiguo no admite las palabras clave Conserva un diseño legible alineado con el borde o solicita un cambio en el marcado

No deduzcas la compatibilidad con estas palabras clave a partir de la compatibilidad con text-indent básico. Los datos actuales de compatibilidad de MDN indican que tanto hanging como each-line están disponibles desde Safari 15, Firefox 121 y Chrome 146. Las instalaciones más antiguas pueden admitir la sangría habitual y rechazar esta combinación. Datos de compatibilidad de navegadores de MDN: text-indent.

Comprueba también si los saltos representan la estructura correcta. WHATWG reserva <br> para los saltos que forman parte del contenido e indica que no debe usarse para separar grupos temáticos dentro de un párrafo. Los párrafos separados deben ir en elementos de párrafo; una colección de elementos de lista debe usar marcado de lista. Estándar HTML: el elemento br, Estándar HTML: agrupación de contenido.

Conserva las etiquetas de salto con la solución CSS nativa

El siguiente documento HTML completo muestra el método que conserva los saltos. En tu Mac, pégalo en un editor de texto sin formato o de código, guárdalo como hanging-indent.html y abre ese archivo en un navegador. Usa un archivo HTML, no un documento de texto enriquecido.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Break-separated hanging indent</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      margin: 0;
      white-space: normal;
      text-align: start;
      text-indent: 0;
    }

    @supports (text-indent: 2em hanging each-line) {
      .entries {
        text-indent: 2em hanging each-line;
      }
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <p class="entries">Entry A: A long sample line describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.<br>
Entry B: Another long sample line describing a circular tile, an open space beneath it, and a row of neutral labels.<br>
Entry C: A short sample line.</p>
</body>
</html>

La condición @supports comprueba la declaración completa antes de aplicarla. Los navegadores que no admiten la combinación conservan el diseño explícitamente definido y alineado con el borde. Las consultas de características aplican CSS de forma condicional según la compatibilidad del navegador. MDN: @supports.

Aplica la sangría a .entries, el bloque que contiene el texto. La propiedad pertinente se aplica a los contenedores de bloque; poner la declaración en el <br> no proporciona un contenedor para la entrada siguiente. MDN: text-indent.

El valor 2em es una elección de diseño ajustable. Prueba un valor menor o mayor después de comprobar el diseño estrecho. Crea un desplazamiento uniforme para las continuaciones; no mide el ancho de «Entrada A:» ni alinea automáticamente el texto debajo de la primera palabra tras una etiqueta de longitud variable.

Usa bloques separados cuando todos los navegadores deban mostrar la sangría

Si cada entrada es un párrafo independiente, cambia el marcado para que cada entrada tenga su propia primera línea. La siguiente alternativa completa elimina los saltos separadores y aplica por separado a cada párrafo el cálculo tradicional de la sangría francesa.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph hanging indents</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      text-indent: 0;
    }

    .entry {
      margin: 0;
      padding-inline-start: 2em;
      text-indent: -2em;
      white-space: normal;
      text-align: start;
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <div class="entries">
    <p class="entry">Entry A: A long sample paragraph describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.</p>
    <p class="entry">Entry B: Another long sample paragraph describing a circular tile, an open space beneath it, and a row of neutral labels.</p>
    <p class="entry">Entry C: A short sample paragraph.</p>
  </div>
</body>
</html>

El relleno desplaza hacia dentro en 2em el inicio del contenido del párrafo. La sangría negativa desplaza hacia atrás solo su primera línea en la misma cantidad. Las líneas ajustadas conservan la posición inicial con relleno. Es esencial que los valores sean iguales: cambiar solo uno modifica dónde empieza la primera línea. MDN documenta la sangría negativa, mientras que padding-inline-start añade relleno en el borde inicial lógico. MDN: text-indent, MDN: padding-inline-start.

Con un tamaño de fuente ilustrativo de 16 píxeles, un desplazamiento de 2em equivale a 32 píxeles: la continuación empieza 32 píxeles hacia dentro y el ajuste de la primera línea es de −32 píxeles. Es un cálculo para el ejemplo, no un resultado de renderizado medido.

Elimina los separadores antiguos al adoptar esta estructura. Mantén cada entrada completa y su formato en línea existente dentro de su nuevo párrafo. Si el contenido es una lista, usa elementos de lista; el ejemplo con párrafos es adecuado específicamente para párrafos independientes. Estándar HTML: agrupación de contenido.

Comprueba el ajuste y el flujo del texto antes de terminar

Prueba la página con un ancho en el que ambas entradas largas se ajusten a varias líneas. Después, amplía la ventana hasta que quepan en una sola línea. Usa las siguientes comprobaciones para distinguir un problema de sangría de uno de ajuste o de estructura.

  1. Comprueba el inicio de cada entrada. En el ejemplo que conserva los saltos, el texto posterior a cada <br> debe volver al borde exterior. Si no es así, comprueba la compatibilidad con la combinación completa de palabras clave.
  2. Comprueba cada continuación. Las entradas largas deben ajustarse con sangría. Las entradas cortas deben quedar alineadas con el borde, sin espacios iniciales adicionales.
  3. Comprueba la columna más estrecha prevista. Reduce la sangría si ocupa demasiado ancho de línea disponible.
  4. Comprueba el contenido real. Conserva las palabras, el énfasis en línea y los saltos explícitos previstos de cada entrada al moverla a un bloque separado.

Si nada se ajusta a varias líneas, revisa white-space. El ejemplo usa normal, que colapsa los espacios en blanco del código fuente y permite el ajuste. pre conserva los espacios en blanco, pero impide el ajuste automático normal; pre-wrap conserva los espacios en blanco y permite el ajuste. La sangría no puede verse en una línea de continuación que nunca llega a formarse. MDN: white-space.

Evita añadir espacios para simular la sangría. Con white-space: normal, las secuencias de espacios se colapsan. Evita también insertar etiquetas de salto adicionales en los puntos donde se ajusta el texto en la ventana actual: convertirían continuaciones elegidas por el navegador en inicios explícitos y cambiarían cómo las trata each-line. MDN: white-space, W3C: sangría de la primera línea.

Deja que el navegador se encargue de los saltos de línea y la composición de los glifos. No dividas una entrada en elementos que envuelvan caracteres para calcular las líneas visibles. W3C documenta casos en los que los límites entre elementos en línea interrumpen la composición, como cuando hay relleno, bordes o márgenes en línea distintos de cero entre caracteres. Para esta tarea, ajustar entradas completas en sus límites previstos evita introducir esos límites adicionales dentro de las palabras. W3C: composición entre límites de elementos.

Termina con la estructura que corresponda a tu contenido: conserva los saltos explícitos con significado usando hanging each-line o asigna a las entradas independientes sus propios bloques. Confirma que cada entrada empiece alineada con el borde y que solo sus continuaciones ajustadas de forma natural se desplacen hacia dentro en los anchos previstos.

Fuentes