文本溢出导致Flex布局元素偏移的原因排查

核心原因有两个： #

1. text-overflow: ellipsis生效条件不满足
   你没给.first、.second设置white-space: nowrap，text-overflow: ellipsis要生效，必须保证文本在单行内溢出。你的长文本是无空格的连续字符，浏览器会把它当成一个不可拆分的整体，不会自动换行，反而会撑大容器的宽度。

2. flex子元素的默认最小宽度限制
   flex布局里的子元素，默认min-width: auto——意思是子元素的宽度不能小于自身内容的最小宽度。哪怕你设置了flex: 1 1 0（允许元素缩放），但因为这个默认限制，.first会被超长文本撑大，挤占.second和.third的空间，导致第二个元素被挤偏移，打破了1:1:2的比例。

修复方案 #

给需要显示省略号的元素补充两行CSS：

.first, .second {
  flex: 1 1 0;
  margin: 10px;
  border: 2px red solid;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 强制文本单行显示，触发溢出 */
  min-width: 0; /* 取消最小宽度限制，让flex缩放正常生效 */
}

这样既能让文本溢出显示省略号，又能保证三个元素按1:1:2的比例分配空间，不会出现偏移。

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