如何避免父元素因溢出隐藏的子文本被撑开并实现居中？

我来帮你搞定这个问题！首先咱们得搞清楚为啥会出现这个情况：

问题出在哪？ #

你现在的代码里，<span>是inline-flex元素，它的宽度会跟着内部<h3>的真实内容宽度走——哪怕<h3>设置了省略号，它实际占的宽度还是完整长文本的宽度，这就导致<span>被无形撑开，看起来像有不可见区域，还破坏了nav里的居中效果。另外<h3>的max-width: 30%是相对于<span>的，但<span>没宽度限制，这个百分比根本没法正确生效。

修复后的代码 #

HTML结构不用改，保持你原来的就行：

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

重点调整SCSS的关键规则：

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  // 防止极端情况内容溢出视口
  overflow: hidden;
}

span {
  display: inline-flex;
  align-items: center;
  // 给span设最大宽度，不让它超出nav的范围
  max-width: 100%;
  // 要是你想让span有固定宽度，比如占视口80%，可以换成width: 80%
}

h3 {
  overflow: hidden;
  // 两个h3各分一半span的宽度，还要减去两边的margin
  max-width: calc(50% - 2em);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 1em;
}

改动说明 #

1. 给<span>加max-width: 100%：直接把span的最大宽度锁死在nav的范围内，不管内部文本多长，span都不会被撑开溢出。
2. 调整<h3>的max-width为calc(50% - 2em)：因为有两个h3，各分配一半span的宽度，同时减去两边1em的margin，保证两个h3不会挤在一起，各自在自己的空间里显示省略号。
3. 给<nav>加overflow: hidden：做个兜底，防止万一有内容溢出的时候页面布局乱掉。

这样改完之后，span会稳稳地在nav里居中，长文本的h3只会自己显示省略号，再也不会撑开span啦～

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