Flexbox 居中的 div 不会缩小，因此无法截断嵌套元素中的文本答案

【问题标题】：Flexbox centered div does not shrink and therefore cannot truncate text in nested elementFlexbox 居中的 div 不会缩小，因此无法截断嵌套元素中的文本
【发布时间】：2022-09-24 01:57:49
【问题描述】：

当屏幕变小时，我正在尝试截断 ID 为 first-item 的 span 中的长文本。但是，当在父级上设置边距时，它不能缩小，因此截断似乎不起作用。我相信它与Why don\'t flex items shrink past content size? 有关，但我无法使其工作。

body {
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

#container {
  display: flex;
}

#first-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<body>
  <main>
<div id=\"container\">
  <span id=\"first-item\">Long long long long long long long long long long long long long long long long long long long long long long long long long text to be truncated</span>
  <span>Shorter text</span>
</div>
  </main>
</body>

编辑：正如@AmauryHanser 评论的那样，帖子的初始版本中有一个错字，现在已更正。即使看起来省略号在那里，它也只能缩小到一个点，问题仍然存在。检查下面的屏幕截图。

你有一个错字disaply: flex; 应该是display: flex;
谢谢@AmauryHanser。我已经纠正了它并且它有效。但是，在我没有拼写错误的设置中，它没有。我将尝试再次重现并编辑答案。

标签： html css flexbox

【解决方案1】：

将max-width:100% 添加到主目录

body {
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: auto;
}

#container {
  display: flex;
}

#first-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<body>
  <main>
    <div id="container">
      <span id="first-item">Long long long long long long long long long long long long long long long long long long long long long long long long long text to be truncated</span>
      <span>Shorter text</span>
    </div>
  </main>
</body>

【讨论】：

它有效，谢谢。你能解释一下发生了什么吗？为什么使最大宽度100% 允许它进一步缩小？
@Demetris 问题在于，作为 flex 项目的主要元素由于空白：nowrap 而溢出主体。你的问题从那里开始。如果您将主体限制为主体宽度，则容器将跟随它，对于第一项也是如此。在修复之前为所有元素添加边框以更好地识别问题