Css 如何防止父级扩展溢出隐藏的子级文本？

HTML:

这里的代码是：

可以在

内看到一个不可见区域，如果增加文本内容，该区域将扩展

---

预期结果：使

对准

中的中心

在您的示例中，

span

是一个灵活的容器-因此，如果要将其子对象沿主轴居中，它应该具有

justify content:center

nav{
宽度：100%；
显示器：flex；
}
导航跨度{
显示：内联flex；
边框：1px纯蓝色；
证明内容：中心；
}
导航跨度h3{
边框：1px纯红；
溢出：隐藏；
最大宽度：30%；
文本溢出：省略号；
空白：nowrap；
边缘：0 1米；
}

123
111111111111111111111111111111111111111111111111111111111111

谢谢！是否可以使

宽度不包含不可见的溢出部分？

<nav>
  <span>
    <h3>123</h3>
    <h3>111111111111111111111111111111111111111111111111111111111111</h3>
  </span>
</nav>

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  span {
    display: inline-flex;
    align-items: center;

    h3 {
      overflow: hidden;
      max-width: 30%;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0 1em;
    }
  }
}