现代CSS能否检测文本换行？实现标题对齐自适应

纯CSS没有直接检测文本是否换行的原生属性，但可以通过以下几种间接方法实现你要的效果——大屏（文本不换行）时标题居中，小屏（文本换行）时左对齐：

方法一：媒体查询（基于屏幕宽度） #

这是最常用的方案，根据屏幕断点设置对齐方式。先默认左对齐，当屏幕宽度足够让标题不换行时，切换为居中：

/* 默认小屏左对齐 */
h1 {
  text-align: left;
}

/* 大屏时居中，这里的768px是预估的标题不换行的最小屏幕宽度，可根据实际内容调整 */
@media (min-width: 768px) {
  h1 {
    text-align: center;
  }
}

局限性：如果标题内容有变化，需要手动调整断点宽度，适合固定内容的场景。

方法二：容器查询（基于容器宽度） #

如果标题所在容器的宽度不是全屏，用容器查询更灵活，它基于容器的宽度而非屏幕宽度判断：

/* 给标题父容器设置容器类型 */
.title-container {
  container-type: inline-size;
}

/* 默认左对齐 */
h1 {
  text-align: left;
}

/* 当容器宽度足够让标题不换行时，设置居中，这里的600px是预估的标题不换行的最小容器宽度 */
@container (min-width: 600px) {
  h1 {
    text-align: center;
  }
}

优势：比媒体查询更适配复杂布局，主流浏览器目前都已支持容器查询。

方法三：hack式自适应（基于内容宽度） #

通过width: fit-content和margin的组合，实现近似效果：

h1 {
  /* 当文本换行时，width会撑满容器，此时text-align: left生效 */
  /* 当文本不换行时，width为内容宽度，margin: 0 auto让它居中 */
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}

注意：这个方法的效果依赖于容器的宽度和文本内容，某些边缘场景可能不符合预期，需要测试验证。

目前CSS没有原生的"检测文本换行"的特性，上述方法都是通过宽度判断间接实现需求，其中媒体查询和容器查询是更可靠的方案。

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