Propiedad CSS text-justify

La propiedad text-justify define el comportamiento del espaciado entre palabras o caracteres.

La propiedad text-justify es una de las propiedades de CSS3.

La propiedad text-justify selecciona el método de justificación del texto cuando text-align se establece en "justify".

Valor inicial	auto
Se aplica a	Elementos de nivel de bloque.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.textJustify = "inter-character";

Sintaxis

Valores de CSS text-justify

css

text-justify: auto | inter-word | inter-character | none | initial | inherit;

Ejemplo de la propiedad text-justify:

Ejemplo de código CSS text-justify

html

<!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>

Try it Yourself »

Resultado

Valor inter-word de CSS text-justify

En el siguiente ejemplo, redimensione el navegador para ver cómo funciona "justify":

Ejemplo de la propiedad text-justify con el valor "inter-character":

Ejemplo de CSS text-justify con valor inter-character

html

<!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>

Try it Yourself »

Nota: El soporte del navegador para text-justify es limitado. El valor inter-character no es compatible con la mayoría de los navegadores modernos.

Valores

Valor	Descripción	Pruébalo
`auto`	El algoritmo de justificación está definido. Se permite que el navegador determine 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. Esto es típico de los 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.

Práctica

¿Cuáles son los diferentes valores de la propiedad 'text-justify' en CSS y qué significan?

'auto' - El navegador determina la justificación.'none' - El texto no está justificado. La alineación del texto la determina la propiedad 'text-align'.'inter-word' - La justificación se realiza permitiendo un espacio extra entre palabras.'inter-character' - La justificación se realiza permitiendo un espacio extra entre caracteres.'inter-line' - La justificación se realiza permitiendo un espacio extra entre líneas.

Propiedad CSS text-justify ​

Sintaxis ​

Ejemplo de la propiedad text-justify: ​

Resultado ​

Ejemplo de la propiedad text-justify con el valor "inter-character": ​

Valores ​