Ajuste de línea

Ajusta texto a un ancho de columna específico con opciones de límite de palabra

¿Qué es y cómo funciona?

El ajuste de palabras controla cómo se divide el texto en líneas cuando supera el ancho disponible. Las propiedades CSS `word-wrap` (estandarizada como `overflow-wrap`) y `word-break` tienen comportamientos distintos que confunden a muchos desarrolladores. `overflow-wrap: break-word` permite dividir en posiciones arbitrarias solo cuando la palabra no cabe — es la opción "segura". `word-break: break-all` divide en cualquier límite de carácter.

Esta herramienta genera el CSS correcto para tus requisitos de ajuste de palabras y muestra vistas previas visuales de cómo diferentes combinaciones afectan la representación del texto.

Casos de uso

Preguntas frecuentes

¿Cuál es la diferencia entre `word-wrap` y `overflow-wrap`?

`overflow-wrap` es el nombre oficial de la propiedad CSS; `word-wrap` es el nombre original no estándar. Son alias — configurar cualquiera establece el mismo comportamiento. El código moderno debe usar `overflow-wrap`.

¿Cuál es la diferencia entre `word-break: break-all` y `overflow-wrap: break-word`?

`break-word` solo divide una palabra cuando toda la palabra no cabe en una línea. `break-all` divide en cualquier posición de carácter. Para la mayoría del contenido, `overflow-wrap: break-word` es preferido.

¿Cómo funcionan las propiedades de guionado CSS?

La propiedad `hyphens: auto` requiere un atributo `lang` en el elemento HTML. `hyphens: manual` solo guioniza donde has colocado `&shy;` o `<wbr>` en el HTML.

¿Qué es la propiedad `white-space`?

`white-space: nowrap` evita todos los saltos de línea. `white-space: pre` preserva los espacios en blanco. `white-space: pre-wrap` preserva los espacios pero ajusta las líneas cuando desbordan.

Utilidades

Generador de contraseñas · Generador de código QR · Cronómetro · Temporizador · Calculadora · Generador de números aleatorios