如何让高优先级溢出span优先扩展，低优先级span收缩显示省略号？

首先，你的思路方向是对的——min/max-width确实是关键，但结合浮动元素的特性，我们需要调整一些布局约束来让优先级生效。另外，虽然你提到不能修改两个<span>的float属性，但其实有两种可行方案：一种完全保留浮动行为，另一种利用flex布局（即使float存在也能正常工作，因为flex会覆盖浮动的布局效果）。

方案1：纯浮动布局（完全保留float设置） #

这种方案不需要改变任何现有float规则，只需要给父元素和两个span添加额外的CSS约束：

.parent {
  overflow: hidden; /* 包裹浮动元素，避免高度塌陷 */
  white-space: nowrap; /* 强制两个span在同一行，防止more-important换行 */
}

.less-important {
  float: left;
  max-width: calc(100% - 120px); /* 120px是more-important的最小宽度，可按需调整 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-important {
  float: right;
  min-width: 120px; /* 保证重要内容至少有基础显示宽度 */
  white-space: nowrap;
}

原理说明： #

• .parent的white-space: nowrap强制两个浮动元素不会换行，确保它们始终在同一行竞争空间。
• .more-important的min-width保证它至少能显示基础内容，不会被压缩到消失；white-space: nowrap防止它自身内容换行。
• .less-important的max-width: calc(100% - 120px)限制了它的最大宽度，当.more-important内容溢出需要更多空间时，.less-important会自动收缩到这个计算值以内，同时通过text-overflow: ellipsis处理溢出内容。

方案2：Flex布局（兼容现有float设置） #

如果可以给父元素添加flex布局（不需要修改span的float属性，因为flex子元素的float会被浏览器忽略），这种方案更灵活，不需要手动计算最小宽度：

.parent {
  display: flex;
  white-space: nowrap;
}

.less-important {
  flex: 1; /* 占据剩余所有可用空间 */
  min-width: 0; /* 关键：允许元素被压缩到小于内容宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-important {
  flex: 0 1 auto; /* 仅占据自身内容需要的宽度，空间不够时也不压缩（可选改为0 0 auto禁止压缩） */
  white-space: nowrap;
}

原理说明： #

• .parent的display: flex把两个span变成flex子元素，此时它们的float属性会被浏览器忽略，不影响布局。
• .less-important的flex: 1让它优先占据父元素的剩余空间；min-width: 0是核心——默认flex子元素的min-width是auto（即内容宽度），设置为0后才允许它被压缩，从而触发text-overflow。
• .more-important的flex: 0 1 auto让它只占据自身内容需要的宽度，当父元素空间不足时，它不会被压缩（如果需要完全禁止压缩，可改为flex: 0 0 auto），优先保证自身内容完整显示。

两种方案都能满足你的需求：当.more-important内容较多时优先扩展，.less-important自动收缩显示省略号；当.more-important内容较少时，.less-important可以扩展到父元素允许的最大宽度。

内容的提问来源于stack exchange，提问作者The Vanilla Thrilla