在css flex容器中实现左侧文字超出截断而右侧数字固定，核心做法是让左侧元素设置`flex: 1 0 0`并配合`overflow: hidden`与`text-overflow: ellipsis`，同时让右侧数字元素设置`flex: 0 0 auto`。这样左侧会占据剩余空间并在溢出时显示省略号，右侧则保持其内容宽度不被压缩。
Flex布局中左右元素的尺寸分配机制是什么
Flex布局通过`flex-grow`、`flex-shrink`和`flex-basis`三个属性控制子元素的空间分配。默认情况下，所有子元素都会尝试收缩以适应容器，这会导致左侧长文本被挤压变形。要实现左侧截断右侧固定，必须显式设置左侧元素的`flex-basis`为0，使其初始大小为0，从而迫使它去争夺剩余空间；而右侧元素保持默认的`flex-basis: auto`，使其宽度由内容决定且不可收缩。
<div style="display: flex; width: 300px; border: 1px solid #ccc; padding: 10px;">
<div style="flex: 1 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
这是一段非常长的文本，用于测试左侧文字超出截断的效果
</div>
<div style="flex: 0 0 auto; margin-left: 10px;">
123456
</div>
</div>
运行上述代码，容器总宽300px。左侧`div`因`flex: 1 0 0`占据剩余空间，当文本长度超过可用宽度时，末尾显示省略号。右侧`div`因`flex: 0 0 auto`保持固定宽度，不受左侧文本影响。预期结果是左侧文本截断，右侧数字完整显示。
如果右侧元素也需要响应式调整宽度该如何处理
若右侧数字需要根据内容动态调整但又不希望左侧完全消失，可以调整右侧的`flex-shrink`值或设置最小宽度。例如，设置右侧元素`min-width`为其内容所需的最小宽度，确保即使容器极窄，右侧也不会被压缩到不可见。此时左侧仍保持截断行为，但右侧会保留其最小可视区域。
<div style="display: flex; width: 300px; border: 1px solid #ccc; padding: 10px;">
<div style="flex: 1 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
这是一段非常长的文本，用于测试左侧文字超出截断的效果
</div>
<div style="flex: 0 0 auto; min-width: 60px; margin-left: 10px; text-align: right;">
123456
</div>
</div>
在上述代码中，右侧`div`添加了`min-width: 60px`，确保其至少占用60px宽度。当容器宽度小于左侧文本加右侧最小宽度的总和时，左侧文本依然截断，右侧保持60px宽度。预期结果是右侧数字始终可见，左侧文本根据剩余空间截断。
当左侧文本为空时右侧数字的位置会发生什么变化
当左侧文本为空时，由于左侧元素设置了`flex: 1 0 0`，其`flex-basis`为0，因此它不会占据任何空间。右侧元素因`flex: 0 0 auto`和`margin-left: 10px`，会紧贴容器左边缘向右偏移10px。此时右侧数字的位置仅由自身宽度和左边距决定，不再受左侧文本长度影响。预期结果是右侧数字靠左显示，中间留有10px间距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
