Flex容器包含多个子span时如何实现整体单省略号文本截断？

有可行的实现方案，无需修改现有DOM结构，仅调整CSS规则即可，核心思路是将截断逻辑从单个子span转移到父flex容器，同时避免子元素被flex布局单独压缩：

调整后的完整CSS代码 #

div {
    display: flex;
    background-color: hotpink;
    max-width: 200px;
    /* 新增：父容器整体控制溢出截断 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

span {
    margin-right: 10px;
    /* 新增：禁止flex收缩子元素，避免单个元素被挤压截断 */
    flex-shrink: 0;
}

/* 覆盖原来加在span上的单独截断规则，不需要的话也可以直接删除该类样式 */
.truncate {
  overflow: initial;
  text-overflow: initial;
  white-space: initial;
}

body {
    margin: 100px;
}

方案说明 #

• 父容器新增的三个属性overflow: hidden、text-overflow: ellipsis、white-space: nowrap负责统一控制所有子元素内容整体在一行显示，溢出容器宽度时仅在末尾显示一个省略号
• 子span新增flex-shrink: 0是为了避免flex布局默认的收缩特性挤压单个子元素，保证所有子元素按自身内容宽度排列
• 可选优化：可以添加span:last-child { margin-right: 0; }去掉最后一个span的右侧多余边距

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