La propiedad text-align: justify

 

La forma más básica de justificar texto es usando:

css

.caja {
    text-align: justify;
}

Ejemplo práctico:

HTML:

html

<div class="caja">
    <p>Este es un párrafo de ejemplo que va a ocupar varias líneas para que puedas ver cómo se ve el texto justificado. Como puedes observar, todas las líneas se estiran para llegar hasta el borde derecho, excepto la última línea.</p>
</div>

CSS:

css

.caja {
    width: 400px;
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    text-align: justify;  /* ¡Aquí está la magia! */
}

Problema común con text-align: justify

Por defecto, la última línea del texto justificado NO se justifica (se alinea a la izquierda). Esto es normal y deseable en la mayoría de los casos, pero si quieres que la última línea también se justifique (útil en textos cortos o títulos), puedes usar:

css

.caja p {
    text-align: justify;
    text-align-last: justify; /* Justifica también la última línea */
}

Ejemplo completo con diferentes opciones

css

/* Ejemplo 1: Justificado normal (recomendado para la mayoría de textos) */
.texto-normal {
    text-align: justify;
}

/* Ejemplo 2: Justificado con última línea centrada */
.texto-centrado {
    text-align: justify;
    text-align-last: center;
}

/* Ejemplo 3: Justificar TODAS las líneas (incluyendo la última) */
.texto-todo-justificado {
    text-align: justify;
    text-align-last: justify;
}

/* Ejemplo 4: Justificado con guiones (para mejor apariencia) */
.texto-con-guiones {
    text-align: justify;
    hyphens: auto; /* Añade guiones automáticos cuando es necesario */
}

Consejos profesionales para mejor justificación

1. Controla el ancho de la caja

El texto justificado se ve mejor en cajas con un ancho adecuado. Si es muy estrecho, quedarán espacios muy grandes entre palabras.

css

.caja-ideal {
    width: 500px; /* Ancho mínimo recomendado */
    text-align: justify;
}

2. Mejora la separación entre palabras

Puedes controlar cómo se separan las palabras:

css

.caja-controlada {
    text-align: justify;
    word-spacing: -0.5px; /* Reduce ligeramente el espacio entre palabras */
    letter-spacing: 0.3px; /* Añade un poco de espacio entre letras */
}

3. Para textos en español, activa los guiones

Esto evita esos "ríos" o espacios muy grandes entre palabras:

css

.texto-profesional {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;  /* Para Safari */
    -moz-hyphens: auto;     /* Para Firefox */
}

Importante: Para que hyphens funcione, necesitas especificar el idioma en HTML:

html

<p lang="es">Texto en español con guiones automáticos cuando una palabra es muy larga y necesita separarse.</p>

Ejemplo práctico completo

Aquí tienes un ejemplo con diferentes tipos de justificación:

css

/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #f5f5f5;
}

.contenedor {
    max-width: 800px;
    margin: 0 auto;
}

.caja {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Diferentes tipos de justificación */
.justify-normal {
    text-align: justify;
}

.justify-last-center {
    text-align: justify;
    text-align-last: center;
}

.justify-last-justify {
    text-align: justify;
    text-align-last: justify;
}

.justify-optimizado {
    text-align: justify;
    hyphens: auto;
    word-spacing: -0.5px;
}

HTML correspondiente:

html

<div class="contenedor">
    <div class="caja">
        <h3>Justificado normal:</h3>
        <p class="justify-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
    </div>
    
    <div class="caja">
        <h3>Última línea centrada:</h3>
        <p class="justify-last-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    
    <div class="caja">
        <h3>Optimizado con guiones:</h3>
        <p class="justify-optimizado" lang="es">Este es un texto en español que está especialmente optimizado para verse bien justificado. Las palabras muy largas como "internacionalización" se separarán con guiones automáticamente para mejorar la apariencia del texto.</p>
    </div>
</div>

Resumen rápido

Propiedad	Qué hace	Cuándo usarla
text-align: justify	Justifica el texto	Textos largos, artículos, párrafos
text-align-last: justify	Justifica la última línea	Textos cortos, títulos
hyphens: auto	Añade guiones	Textos en español con palabras largas
word-spacing	Ajusta espacio entre palabras	Para afinar la justificación

¿Hay algo más específico que quieras saber sobre la justificación de texto?