CSS grid布局下实现文本溢出时双span按2fr和1fr分配宽度

核心使用CSS Grid布局配合文本溢出属性即可满足所有需求，无需额外JS逻辑：

完整代码 #

<style>
.container {
  /* 可根据需求自定义容器宽度 */
  width: 300px;
  display: grid;
  /* 按2:1分配轨道宽度，minmax(0)避免内容撑破容器导致比例分配失效 */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  /* 两个span的间距可自定义调整 */
  gap: 4px;
  overflow: hidden;
}
.container span:first-child {
  /* 第一个span占满分配的轨道宽度 */
  justify-self: stretch;
}
.container span:last-child {
  /* 第二个span未溢出时仅占自身内容宽度，不强制撑满轨道 */
  justify-self: start;
}
.container span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

<!-- 容器结构 -->
<div class="container">
  <span>第一个文本内容</span>
  <span>第二个文本内容</span>
</div>

场景适配说明 #

• 容器有剩余空间时，第一个span会自动填充全部可用空间，第二个span仅展示自身内容宽度，符合第一个场景要求
• 总内容超出容器宽度时，grid会严格按2:1的比例分配两个span的宽度，超出部分自动显示省略号，符合第二个场景要求
• 两个span内容都较短时，整体左对齐排列，第二个span仅占自身内容所需宽度，不会被强制拉伸，符合第三个场景要求

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