父元素设置display:flex时嵌套p标签文本溢出边框如何解决

问题原因 #

flex容器的直接子元素（即你代码中的.test-border节点）默认min-width属性值为auto，该规则会强制子元素宽度不小于其内部内容的最小宽度，所以长文本会先把外层的.test-border div撑开，导致内层p标签的溢出省略规则没有触发前提（父元素宽度和文本宽度一致，不存在溢出）。
当你去掉外层div时，p标签直接成为flex容器的子元素，溢出规则可以正常触发，所以省略号效果正常。

解决方案 #

保留外层div的前提下，任选下面一种方案修改即可：

方案1：修改.test-border的最小宽度规则 #

.test-border {
  border-style: dotted;
  min-width: 0; /* 新增该行 */
}

该方案无副作用，是flex布局下这类溢出问题的通用修复方案。如果你的.test-border需要占满flex容器的剩余宽度，可以搭配flex: 1一起使用。

方案2：给.test-border添加溢出隐藏规则 #

.test-border {
  border-style: dotted;
  overflow: hidden; /* 新增该行 */
}

该方案适合外层div本身不需要展示超出内容的场景，实现逻辑更直接。

修改后内层p标签的文本溢出省略规则就会正常生效，文本不会超出虚线边框。

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