CSS text-align playground

Explore text-align with controls for text direction and logical or physical alignment. When using justify, you can also test text-justify and copy the generated CSS.

BaselineLab ayuda a probar propiedades de CSS moderno con controles visuales, una previsualización inmediata y el código listo para copiar en cualquier proyecto web. Cuando cambias la alineación del texto, este párrafo mantiene suficiente longitud para que se aprecie con claridad cómo se distribuyen las palabras en cada línea.

HTML

<div class="text-align" dir="ltr">
  <p>
    BaselineLab ayuda a probar propiedades de CSS moderno con controles visuales,
    una previsualización inmediata y el código listo para copiar en cualquier proyecto web.
    Cuando cambias la alineación del texto, este párrafo mantiene suficiente longitud
    para que se aprecie con claridad cómo se distribuyen las palabras en cada línea.
  </p>
</div>

CSS

.text-align {
  inline-size: min(100%, 36rem);
  min-block-size: 18rem;
  text-align: start;
}