如何防止Grid项目文本换行并实现自适应列宽？

需求回顾 #

• 动态数量的div元素以网格结构展示，填满容器宽度后自动换行
• 所有元素内文本单行显示、左对齐，宽度适配自身文本长度

Flex实现（推荐） #

Flex布局天然适配“按内容宽度排列、填满换行”的需求，代码简洁且完全匹配预期效果：

.flex {
  display: flex;
  width: 600px;
}
.flex-container {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  white-space: nowrap;
  background: red;
  height: 25px;
  border: 1px solid white;
  padding: 5px 10px;
  flex-shrink: 0; /* 禁止元素压缩，确保宽度适配文本 */
}
.another-div {
  margin-left: 10px;
}

<div class="flex">
  <div class="flex-container">
    <div class="flex-item">test text</div>
    <div class="flex-item"> Test longer text</div>
    <div class="flex-item">Maybe a little bit more text so it overflows</div>
    <div class="flex-item"> Another long text that will overflow abit</div>
    <div class="flex-item">More text</div>
    <div class="flex-item">More text</div>
    <div class="flex-item">More text</div>
  </div>
  <div class="another-div">
    <select>
      <option> Select one</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
</div>

Grid实现（近似方案） #

由于Grid的列宽度全局统一（同一列的所有行宽度一致），无法做到每行独立适配内容宽度，但可以实现“填满换行、单行显示”的近似效果：

.flex {
  display: flex;
  width: 600px;
}
.grid {
  display: grid;
  flex-grow: 1;
  /* 自动创建尽可能多的列，列宽最小为内容宽度，最大占满剩余空间 */
  grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));
}
.grid-item {
  white-space: nowrap;
  background: red;
  height: 25px;
  border: 1px solid white;
  padding: 5px 10px;
  overflow: hidden;
  text-overflow: ellipsis; /* 可选，文本过长时显示省略号 */
}
.another-div {
  margin-left: 10px;
}

<div class="flex">
  <div class="grid">
    <div class="grid-item">test text</div>
    <div class="grid-item"> Test longer text</div>
    <div class="grid-item">Maybe a little bit more text so it overflows</div>
    <div class="grid-item"> Another long text that will overflow abit</div>
    <div class="grid-item">More text</div>
    <div class="grid-item">More text</div>
    <div class="grid-item">More text</div>
  </div>
  <div class="another-div">
    <select>
      <option> Select one</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
</div>

原问题原因分析 #

你之前的尝试中：

• 使用repeat(auto-fit, minmax(0, max-content))时，文本换行是因为Grid项目默认允许文本换行以适应列宽
• 添加white-space: nowrap后出现溢出，是因为max-content固定了列宽为文本长度，当总列宽超过容器时，Grid不会自动调整列数换行（auto-fit会提前计算列数，一旦确定就不会因内容溢出改变）

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