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 helps you test modern CSS properties with visual controls, an immediate preview and code ready to copy into any web project. When you change text alignment, this paragraph stays long enough to clearly show how words are distributed across each line.

HTML

<div class="text-align" dir="ltr">
  <p>
    BaselineLab helps you test modern CSS properties with visual controls,
    an immediate preview and code ready to copy into any web project.
    When you change text alignment, this paragraph stays long enough
    to clearly show how words are distributed across each line.
  </p>
</div>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<div class="inline-xl min-block-72 text-start" dir="ltr">
  <p>
    BaselineLab helps you test modern CSS properties with visual controls,
    an immediate preview and code ready to copy into any web project.
    When you change text alignment, this paragraph stays long enough
    to clearly show how words are distributed across each line.
  </p>
</div>

CSS

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