Propiedad CSS text-justify
Usa la propiedad CSS text-justify para controlar el espaciado entre palabras o caracteres en texto justificado. Valores, ejemplos y compatibilidad.
La propiedad CSS text-justify controla cómo el navegador distribuye el espacio extra cuando el texto justificado se estira para llenar cada línea. Solo tiene efecto cuando text-align está configurado en justify — por sí sola no hace nada.
Esta página explica qué hace text-justify, cada uno de sus valores, cuándo usarla, los problemas de compatibilidad con navegadores que debes conocer y cómo se relaciona con otras propiedades de espaciado.
El problema que resuelve
Cuando estableces text-align: justify, el navegador rellena cada línea para que los bordes izquierdo y derecho queden alineados, como en una columna de periódico. Hay dos formas de añadir ese relleno: ampliar los espacios entre palabras o ampliar los espacios entre caracteres. text-justify te permite elegir qué estrategia usa el navegador, en lugar de dejarlo en manos del algoritmo predeterminado.
Esto es importante porque la estrategia correcta depende del idioma. Los idiomas con espacios entre palabras (inglés, alemán, francés) generalmente lucen mejor con espaciado adicional entre palabras. Los idiomas escritos sin espacios entre palabras (como el chino, el japonés y el coreano) solo tienen margen para estirarse entre caracteres, por lo que inter-character es la opción natural para ellos.
text-justify es una de las propiedades CSS3.
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos de bloque. |
| Heredable | No. |
| Animatable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.textJustify = "inter-character"; |
Sintaxis
text-justify: auto | inter-word | inter-character | none | initial | inherit;Dado que text-justify es inerte sin texto justificado, casi siempre se establecen las dos juntas:
p {
text-align: justify; /* turn justification on */
text-justify: inter-word; /* choose how the gaps grow */
}Ejemplo de la propiedad text-justify:
Ejemplo de código CSS text-justify
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-word;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Resultado
Con inter-word, los espacios entre palabras crecen hasta que cada línea llega al borde del contenedor. Si redimensionas el navegador para hacerlo más estrecho, verás que los espacios se estiran más en las líneas que están lejos de llenar el ancho.
Ejemplo de la propiedad text-justify con el valor "inter-character":
Ejemplo de CSS text-justify con el valor inter-character
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-character;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Con inter-character, el espacio extra se inserta entre caracteres individuales en lugar de solo entre palabras. En texto latino el efecto es sutil; resulta esencial para escrituras CJK donde no hay espacios entre palabras que ampliar.
Compatibilidad con navegadores y advertencias
text-justify tiene soporte irregular y algunos aspectos importantes que conviene conocer antes de utilizarla:
inter-characteres el valor adicional más fiable, pero la palabra clavedistribute, antes habitual, fue renombrada ainter-charactery el nombre antiguo está obsoleto.noneno se respeta en todos los navegadores. Algunos motores siguen justificando la última línea o recurren al algoritmo predeterminado, por lo que es mejor comprobar en lugar de asumir que la justificación está completamente desactivada.- El texto justificado puede crear "ríos" — canales irregulares de espacio en blanco que recorren un párrafo — especialmente en columnas estrechas. Combinar la justificación con
hyphens: autoy una medida razonable (longitud de línea) los reduce. - La última línea de un bloque justificado nunca se estira; permanece alineada a la izquierda (o sigue
text-align-last).
En caso de duda, establece text-justify: auto (o déjalo sin definir) y deja que el navegador elija la mejor estrategia según el idioma del contenido.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
auto | El algoritmo de justificación está definido. El navegador puede determinar si inter-word o inter-character es mejor para la justificación. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
inter-word | El navegador aumenta el espacio entre palabras. Es típico de idiomas con límites de palabras claros. | Pruébalo » |
inter-character | El navegador aumenta el espacio entre caracteres durante la justificación. | Pruébalo » |
none | La justificación está desactivada. | Pruébalo » |
initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
text-align— la propiedad que debe estar enjustifypara quetext-justifytenga algún efecto.text-align-last— controla la alineación de la última línea de un bloque justificado.word-spacing— establece directamente el espacio entre palabras, independientemente de la justificación.letter-spacing— establece directamente el espacio entre caracteres (tracking).