如何用纯CSS实现适配文本长度的Header组件自适应布局？

要满足你提出的三个自适应条件，核心是调整Grid列的宽度逻辑，让左侧返回按钮和中间标题能根据内容动态分配空间，同时在两者都过长时保持25%/50%/25%的预设布局。

问题分析 #

现有代码中，grid-template-columns: minmax(25%, 1fr) fit-content(50%) minmax(25%, 1fr)的写法限制了中间列的最大宽度为50%，且左侧列会和右侧列平分剩余空间，导致左侧内容较长但标题较短时，无法优先占用标题的剩余空间，只能和右侧平分，不满足第三个条件。

解决方案 #

调整Grid列定义，让左侧列可以动态扩展（但不挤压标题到无法显示），中间列优先保留自身内容空间，同时限制最大宽度以满足双方过长时的布局：

.wrap {
  display: grid;
  /* 左侧：自适应扩展空间，最小0；中间：自适应内容宽度；右侧：固定25%占位 */
  grid-template-columns: minmax(0, 1fr) auto 25%;
  margin: 0 auto 20px;
}

.left {
  background: #faa;
  padding: 5px;
  /* 限制左侧最大宽度为75%，避免完全覆盖标题 */
  max-width: 75%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right {
  background: #faa;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.middle {
  background: #aaf;
  padding: 5px;
  text-align: center;
  /* 限制标题最大宽度为50%，满足双方过长时的预设布局 */
  max-width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="wrap">
  <div class="left">&lt; Left short</div>
  <div class="middle">Middle short</div>
  <div class="right"></div>
</div>

<div class="wrap">
  <div class="left">&lt; Left long lorem ipsum dolor sit amet elit sed ante purus tincidunt in semper sit amet vehicula ut mauris rhoncus nunc sed sapien varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus</div>
  <div class="middle">Middle short</div>
  <div class="right"></div>
</div>

<div class="wrap">
  <div class="left">&lt; Left long lorem ipsum dolor sit amet elit sed ante purus tincidunt in semper sit amet vehicula ut mauris rhoncus nunc sed sapien varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus</div>
  <div class="middle">Middle long lorem ipsum dolor sit amet elit sed ante purus tincidunt in semper sit amet vehicula ut mauris rhoncus nunc sed sapien varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus</div>
  <div class="right"></div>
</div>

<div class="wrap">
  <div class="left">&lt; Left short</div>
  <div class="middle">Middle long lorem ipsum dolor sit amet elit sed ante purus tincidunt in semper sit amet vehicula ut mauris rhoncus nunc sed sapien varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus</div>
  <div class="right"></div>
</div>

效果验证 #

1. 较长标题优先填充：左侧内容短时，标题会占用最多50%的宽度，超出部分显示省略号；若标题内容未达50%，则保持自身宽度居中。
2. 两者均过长时保持预设布局：左侧和标题分别占用25%和50%宽度，超出内容截断。
3. 较长返回按钮优先填充：标题内容短时，左侧会占用标题之外的大部分可用空间（最大75%），超出部分显示省略号，标题始终保持居中显示。

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