如何用CSS将图标与两个span元素始终保持在同一行？

以下几种CSS方案都能让图标、文本及两个badge始终保持在同一行，适配小屏幕场景：

方案1：Flex布局（推荐） #

给包含这些元素的父容器添加flex布局，强制子元素不换行，并控制元素的收缩优先级：

/* 父容器样式 */
.parent-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  flex-wrap: nowrap; /* 强制所有子元素在一行 */
  gap: 8px; /* 可选：设置元素间间距 */
}

/* 文本元素：允许收缩以避免换行 */
.text-span {
  flex-shrink: 1;
  white-space: nowrap; /* 文本自身不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出显示省略号（可选） */
}

/* 图标和badge：禁止收缩，保持原有尺寸 */
.icon, .badge {
  flex-shrink: 0;
}

原理：flex-wrap: nowrap 确保所有子元素不会换行，flex-shrink 控制元素在空间不足时的收缩规则，图标和badge保持原有大小，文本则收缩并处理溢出。

方案2：White-space强制不换行 #

给父容器设置white-space: nowrap，同时让子元素以行内块级元素展示：

.parent-container {
  white-space: nowrap; /* 强制内部所有元素在一行 */
}

.icon, .text-span, .badge {
  display: inline-block; /* 让元素在同一行排列并支持宽高样式 */
  vertical-align: middle; /* 垂直居中对齐 */
  margin-right: 8px; /* 可选：设置元素间间距 */
}

/* 可选：处理文本溢出 */
.text-span {
  max-width: calc(100% - 图标宽度 - 两个badge宽度 - 间距总和);
  overflow: hidden;
  text-overflow: ellipsis;
}

原理：white-space: nowrap 会阻止容器内的元素换行，inline-block 让元素既保持行内特性，又能设置宽高和对齐方式。

方案3：Grid布局 #

用Grid的列流布局，让元素自动排成一行：

.parent-container {
  display: grid;
  grid-auto-flow: column; /* 元素自动按列排列（即横向一行） */
  align-items: center; /* 垂直居中 */
  gap: 8px; /* 元素间间距 */
}

.text-span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

原理：grid-auto-flow: column 会让所有子元素依次排列在同一行，无需额外设置换行规则。

额外注意事项 #

• 检查父容器是否设置了固定宽度或最大宽度，若空间不足，优先保证图标和badge的显示，让文本收缩或截断。
• 若badge内的数字可能变化，避免给badge设置固定宽度，用inline-flex或inline-block让其自适应内容。

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