Como justificar el texto html con css

Actualizado : 2023-10-01

Aunque no es muy común ver páginas web hoy en día usar el texto justificado para algunos sitios que publican investigaciones, artículos cientificos, estudios, etc. Presentar el texto de sus párrafos justificado puede ser una forma de dar una impresión más formal y diferenciadora del resto de páginas web.

Personalmente yo no recomendaría a ninguna web justificar su contenido en este articulo tienes una explicación de porque generalmente esto puede ser una mala idea enlace al artículo.

!Mi opinión personal

En mi opinión el contenido de tú página se verá mucho mejor alineado a la izquierda (Como viene de base) o en su defecto en algunos casos especiales centrado.

Justificar el texto con text-align: justify;

La propiedad que debemos usar para justificar es text-align seguido del valor justify como en el siguiente ejemplo:

html

<p class="text-justify">
  Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de
  texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias
  desde el año 1500, , cuando un impresor (N. del T. persona que se dedica a la
  imprenta) desconocido usó una galería de textos y los mezcló de tal manera que
  logró hacer un libro de textos especimen.
</p>

css

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

Ejemplo con todos los párrafos justificados

Justificar texto directamente en el html usando estilos en línea

Aunque usar estilos en línea no es la forma recomendada de insertar css en html es necesario saber como hacerlo ya que en algunas ocasiones debemos recurrir a este método.

html

<p style="text-align: justify;">
  Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de
  texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias
  desde el año 1500, , cuando un impresor (N. del T. persona que se dedica a la
  imprenta) desconocido usó una galería de textos y los mezcló de tal manera que
  logró hacer un libro de textos especimen.
</p>

Poner el texto justificado con atributo align de html (deprecado)

Investigando para escribir este post conseguí algunos artículos en foros y otras páginas en los que para usar el texto justificado usaban el atributo html align como en los siguiente ejemplos:

html

<p align="justify">Este es el párrafo en el que se justificará el texto</p>
<div align="justify">etiqueta div con texto justificado</div>

De más esta decir que ya no se debe utilizar el atributo align ya que es obsoleto y hay métodos como los mencionados anteriormente que son el estándar en la actualidad.

Nota Importante

Evita siempre usar etiquetas html obsoletas que ya no sean soportadas por el estándar html5 al fin y al cabo css tiene una solución para casi todo, solo basta con investigar un poco para descubrir como realizar la alineación de tú contenido

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi