文本换行时动态调整对齐方式的技术实现咨询

没问题，这里有几个靠谱的方案能实现你要的「短文本居中，换行后自动切换对齐方式」的效果：

1. 纯CSS优雅解法：容器查询（Container Queries） #

这是目前最简洁的纯CSS方案，不需要JS介入，完全靠CSS的容器查询能力实现动态切换。核心逻辑是：检测容器的宽度和文本实际需要的宽度，当文本宽度超过容器可容纳的单行宽度（也就是要换行时），自动切换对齐方式。

/* 先给目标元素设置容器查询上下文 */
.dynamic-align {
  container-type: inline-size;
  text-align: center; /* 默认短文本居中 */
}

/* 当容器宽度小于文本的最小单行宽度（触发换行）时，切换对齐 */
@container (width < fit-content) {
  .dynamic-align {
    text-align: left; /* 换成你想要的对齐方式，比如justify也可以 */
  }
}

注意：容器查询已经被主流浏览器（Chrome 105+、Firefox 110+、Safari 16.4+）支持，兼容性完全够用。

2. JavaScript精准控制：监听尺寸变化 #

如果需要兼容更老的浏览器，或者要做更精细的逻辑判断，可以用JS来检测文本是否换行：

核心原理是对比元素的scrollWidth（文本实际需要的宽度）和clientWidth（容器的可视宽度）——如果前者大于后者，说明文本已经换行或者溢出，就修改对齐方式；反之保持居中。

// 封装调整对齐的函数
function adjustTextAlign(element) {
  if (element.scrollWidth > element.clientWidth) {
    element.style.textAlign = 'left';
  } else {
    element.style.textAlign = 'center';
  }
}

// 初始化执行一次
const targetEl = document.querySelector('.dynamic-align');
adjustTextAlign(targetEl);

// 监听窗口大小变化，实时调整
window.addEventListener('resize', () => adjustTextAlign(targetEl));

// 如果文本内容是动态更新的，记得每次更新后调用adjustTextAlign哦

想要更精准的监听（比如元素自身尺寸变化，不止窗口resize），可以用ResizeObserver：

const observer = new ResizeObserver((entries) => {
  entries.forEach(entry => adjustTextAlign(entry.target));
});
observer.observe(targetEl);

3. 兼容性拉满的CSS小技巧：嵌套inline-block容器 #

如果需要兼容所有浏览器（包括非常老的版本），可以用这个嵌套容器的小技巧，效果同样能满足需求：

/* 外层容器负责居中 */
.text-outer {
  text-align: center;
}
/* 内层容器包裹文本，短文本时宽度和内容一致，换行时撑满外层宽度 */
.text-inner {
  display: inline-block;
  text-align: left; /* 内部文本默认左对齐 */
}

这个方案的视觉效果是：短文本时，内层inline-block容器宽度和文本一致，外层居中让整体看起来是居中的；当文本换行时，内层容器会自动撑到外层的最大宽度，内部文本左对齐，既满足了换行后的排版需求，又保持了短文本的居中效果。

内容的提问来源于stack exchange，提问作者RudBot