Flexbox内文本截断问题：如何让星号紧跟文本？

需求：

• 使用Flexbox实现响应式布局，一行包含两个文本块
• 主文本长度不超过父容器的98%，两个文本块并排显示
• 长文本显示效果：[longgggggg...*]（星号紧跟截断后的文本）
• 短文本显示效果：[short* ]（星号紧跟短文本，剩余空间留空）

当前问题：将主文本的flex basis设为98%后，星号被挤到容器右边缘，无法紧跟主文本。

当前代码：

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: #e3e3e3;
}

.label {
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 0;
  flex: 1 1 98%;
}

.label-asterisk {
  color: #a72e12;
}

<div class="container">
  <span class="label">short</span>
  <span class="label-asterisk">*</span>
</div>

调整CSS规则，让主文本容器在限制最大宽度的同时，允许星号紧凑跟随，修改后的代码如下：

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: #e3e3e3;
}

.label {
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 让主文本占据可用空间，但不挤压星号 */
  flex: 1 1 auto;
  /* 限制主文本最大宽度为父容器的98%，预留星号空间 */
  max-width: calc(98% - 1em);
  /* 关键：允许flex项收缩到小于内容宽度，触发截断 */
  min-width: 0;
}

.label-asterisk {
  color: #a72e12;
  /* 星号保持固有宽度，不参与空间分配 */
  flex: 0 0 auto;
  /* 可选：给星号添加小间距，优化视觉 */
  margin-left: 0.2em;
}

调整说明： #

1. 主文本.label

   • 替换flex: 1 1 98%为flex: 1 1 auto，配合max-width: calc(98% - 1em)，既限制主文本最大宽度为父容器的98%，又预留出星号的显示空间，避免挤压。
   • 添加min-width: 0，这是Flexbox中实现文本截断的必要设置——默认flex项不会收缩到小于内容宽度，加上该属性才能让文本在空间不足时触发省略号截断。

2. 星号.label-asterisk

   • 设置flex: 0 0 auto，让星号保持自身宽度，不参与Flex空间分配，始终紧跟在主文本右侧。

测试效果：

• 短文本场景：星号直接跟在文本后，剩余容器空间留空
• 长文本场景：主文本在达到父容器98%宽度时自动截断显示省略号，星号紧跟在省略号右侧

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