jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas de CSS y diseño

Gratis Constructor CSS text-indent hanging/each-line

Genere declaraciones text-indent CSS con palabras clave hanging y each-line para sangria francesa y sangria tras saltos de linea.

Cargando herramienta...

Qué es Constructor CSS text-indent hanging/each-line?

CSS text-indent ahora soporta las palabras clave hanging y each-line (Baseline 2026: Chrome 130+, Safari 18.2+, Firefox 135+). hanging invierte la dirección de la sangría: la primera línea queda alineada a la izquierda y todas las líneas siguientes se sangran por la longitud especificada. each-line aplica la sangría después de cada salto de línea forzado (como <br>), no solo en la primera línea. Puede combinar ambas palabras clave con un valor de longitud: text-indent: 2em hanging each-line crea una sangría francesa que también se reinicia después de cada salto de línea.

Respuesta rápida

Use text-indent: 2em hanging para crear una sangría francesa donde la primera línea está alineada a la izquierda y las líneas siguientes se sangran 2em. Añada each-line para aplicar también la sangría después de cada salto de línea forzado. Soporte de navegadores: Chrome 130+, Safari 18.2+, Firefox 135+ (Baseline 2026). La herramienta genera un respaldo para navegadores antiguos que ignoran las palabras clave y aplican una sangría normal de primera línea.

Last updated: 2026-06-01

Limitaciones

  • hanging y each-line requieren navegadores Baseline 2026 (Chrome 130+, Safari 18.2+, Firefox 135+). Los navegadores antiguos ignoran silenciosamente las palabras clave y aplican una sangría estándar de primera línea: aceptable para mejora progresiva pero puede romper requisitos de diseño precisos.
  • each-line solo se activa en saltos de línea forzados (<br>, <hr> o elementos con display: block dentro del texto). No se reinicia después de líneas con ajuste suave en contenedores estrechos. Si necesita control de sangría por línea con ajuste suave, considere la solución alternativa de padding-left con text-indent negativo.
  • text-indent no funciona en elementos inline. Para sangrías francesas a nivel inline en diseños mixtos inline/block, use padding-left con el ancho de sangría deseado y un text-indent negativo en el contenedor block padre.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija el valor de longitud de sangría en unidades em, px o rem. 2em es el estándar para sangrías francesas en bibliografías.
  2. Active la palabra clave hanging para crear una sangría inversa donde la primera línea queda alineada a la izquierda y las líneas siguientes sangradas.
  3. Active la palabra clave each-line para aplicar la sangría después de cada salto de línea forzado (<br>) además de la primera línea.
  4. Copie la declaración CSS generada incluyendo el respaldo para navegadores sin soporte de hanging o each-line.

Para qué puedes usarla

  • Formatear entradas de bibliografía con sangría francesa donde la primera línea está alineada a la izquierda y las líneas siguientes sangradas, coincidiendo con las guías de estilo académico.
  • Crear listas de definición donde el término está alineado a la izquierda y el texto de definición está sangrado, usando hanging con each-line para manejar definiciones multilínea con saltos de línea.
  • Aplicar efectos de puntuación colgante donde las comillas de apertura y viñetas sobresalen del margen del texto para un aspecto tipográfico pulido.

Casos de uso

Ejemplos prácticos

Ejemplo

Bibliografía con sangría francesa

Una bibliografía de artículo de investigación necesita que cada entrada tenga sangría francesa: la primera línea (nombre del autor) está alineada a la izquierda y las líneas de continuación (título, editorial) están sangradas 2em. Use text-indent: 2em hanging. El navegador sangra todas las líneas después de la primera automáticamente, cumpliendo con los requisitos de estilo Chicago y APA.

Ejemplo

Lista de definiciones con each-line

Un sitio de glosario usa <br> dentro de párrafos de definición para separar notas de uso de la definición principal. Con text-indent: 2em hanging each-line, la primera línea de cada segmento separado por <br> recibe el tratamiento de sangría inversa. Cada nuevo segmento después de un salto de línea reinicia la sangría, manteniendo cada sección de definición visualmente separada.

Errores comunes

  • Usar hanging sin un valor de longitud: hanging es un modificador de palabra clave, no una longitud. Siempre debe especificar primero un valor de longitud, como text-indent: 2em hanging. Sin la longitud, la declaración no es válida y no hace nada.
  • Asumir que each-line funciona con el ajuste de línea normal: each-line solo se aplica después de saltos de línea forzados (<br> o similares). No reinicia la sangría después de cada línea con ajuste suave. Para control de sangría por línea con ajuste suave, use un enfoque diferente como padding-left con text-indent negativo.
  • Combinar hanging con un valor de text-indent negativo: hanging ya invierte la dirección de la sangría. Usar un valor negativo con hanging produce resultados inesperados. Use valores de longitud positivos con hanging para un comportamiento predecible.

Verificación

  1. Inspeccione un elemento estilizado en Chrome DevTools y verifique que el valor calculado de text-indent incluya tanto la longitud como las partes de palabra clave. Compruebe que la primera línea renderizada esté alineada a la izquierda y todas las líneas siguientes estén sangradas por la longitud especificada.
  2. Pruebe en Firefox 135+ o Safari 18.2+ y compare la representación con Chrome 130+. La sangría francesa debe aparecer idénticamente en los tres motores. Luego pruebe en un navegador sin soporte de hanging (como una versión antigua de Chrome) para confirmar que el respaldo produce una sangría estándar de primera línea.

FAQ

Preguntas sobre Constructor CSS text-indent hanging/each-line

¿Qué navegadores soportan text-indent con las palabras clave hanging y each-line?

Tanto hanging como each-line son características Baseline 2026. Chrome 130+, Safari 18.2+ y Firefox 135+ soportan ambas palabras clave. En navegadores antiguos, el navegador ignora las palabras clave y aplica una sangría regular de primera línea. La herramienta genera una declaración de respaldo para que su diseño degradece correctamente.

¿Puedo usar hanging con cualquier unidad para la longitud de sangría?

Sí. hanging y each-line funcionan con cualquier unidad de longitud CSS: em, rem, px, ch, ex, cm e incluso valores porcentuales. em es más común para sangrías tipográficas porque escala con el tamaño de fuente. Los valores porcentuales son relativos al ancho del bloque contenedor y producen resultados inconsistentes entre viewports: use em o rem para sangrías francesas predecibles.

¿Afecta hanging a elementos inline o solo a contenedores block?

text-indent se aplica solo a contenedores block (incluyendo flex items y grid items con display: block). No tiene efecto en elementos inline. Para elementos inline o inline-block, use padding-left con un enfoque de margin-left negativo para simular una sangría francesa.

¿each-line también reinicia la sangría francesa al inicio de cada párrafo?

hanging y each-line son palabras clave independientes que puede combinar. hanging controla qué líneas reciben la sangría (primera línea alineada, resto sangrado). each-line controla dónde se reinicia la sangría (después de cada <br>). Cuando se usan juntas (text-indent: 2em hanging each-line), obtiene una sangría francesa que se reinicia después de cada salto de línea forzado. Cada nuevo párrafo comienza fresco naturalmente.

Herramientas relacionadas

Más herramientas de css y diseño

Herramientas de CSS y diseño

Generador de carruseles CSS

Genera el marcado de un carrusel CSS nativo con scroll-snap, botones de desplazamiento, marcadores y una estructura de lista accesible. No requiere JavaScript.

Abrir herramienta

Prueba también

Prueba también