Generally speaking, more than a single line of text should not be center-aligned for improved readability (there are several caveats). With a quick assist from ChatGPT, I was able to put together a dynamic way of changing this.

I needed this for an article layout on my Etch site, where the excerpt is below the title.

Example of an alignment change.

The CSS is really basic:

.excerpt {
  max-inline-size: 60ex;
  color: color-mix(in oklch, var(--neutral) 60%, transparent);
  font-size: calc(var(--text-m) * 1.25);
  text-align: center;
  font-family: utopia-std, azo-sans-;
  opacity: 0;
  scale: 0;
  transition: opacity 0.3s ease-in,scale 500ms linear;
  &.ready {
    scale:1;
    opacity: 1;
  }
  &.multi-line {
    text-align: left;
  }
}

The JavaScript does the line detection and adds the additional class.

document.addEventListener("DOMContentLoaded", () => {
  const excerpts = document.querySelectorAll(".excerpt");

  excerpts.forEach(el => {
    const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
    const lines = Math.round(el.offsetHeight / lineHeight);

    if (lines > 2) {
      el.classList.add("multi-line");
    }

    // mark as ready so it fades in
    requestAnimationFrame(() => {
      el.classList.add("ready");
    });
  });
});