如何在Flexbox中实现长文本截断省略、短文本右侧元素自动贴合的布局？

当前方案的偏差来自Flex子项伸缩规则的配置不当：为了让超长文本触发省略号效果，通常会给文本块添加强制占满剩余空间的样式，导致文本内容较短时，文本块依然会霸占容器内的全部可用宽度，将右侧相邻元素推到容器最边缘，产生不必要的空隙。

要同时满足两种场景的需求，需要让文本块遵守两个核心约束：

• 容器空间不足时，文本块可以压缩自身宽度，自动触发文本省略号，不挤占右侧相邻元素的位置
• 容器空间充足时，文本块宽度完全跟随自身内容长度计算，不主动抢占剩余空间，让右侧元素紧贴文本的实际内容排布

1. 修正文本块的Flex伸缩规则 #

移除原有为文本块设置的flex: 1这类强制占满空间的配置，替换为适配双场景的样式：

.long-and-truncated-with-child-corrected {
  /* 核心伸缩规则：不主动占剩余空间，空间不足时允许收缩，初始宽度按自身内容计算 */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  /* 保留文本截断必需的基础样式 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

规则说明：

• flex-grow: 0：容器存在剩余空间时，文本块不会主动拉伸占满空间，完全按照自身内容的实际宽度撑开
• flex-shrink: 1：容器可用空间不足时，文本块可以按照规则收缩宽度，触发文本截断效果
• flex-basis: auto：文本块的初始尺寸参考自身内容大小，而不是固定的百分比或预设宽度值

2. 补充嵌套子元素的截断适配 #

该用例的文本内容嵌套在子节点中，需要给内部子元素同步配置截断规则，确保效果能作用到最内层的文本节点：

.long-and-truncated-with-child-corrected > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

调整完成后，两个场景的表现完全符合预期：

• 容器/屏幕收窄、可用空间不足时：文本块自动收缩到适配的可用宽度，超长文本显示省略号，右侧的绿色圆点紧贴文本块边缘排布
• 容器/屏幕放大、可用空间充足时：文本块完全匹配“thank you”的实际内容宽度撑开，不会预留多余空白，右侧的绿色圆点直接紧邻文本内容排布，消除所有不必要的空隙

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