为什么'text-overflow: ellipsis”在 Flex 容器中不起作用？

在 Flex 布局中截断带有文本溢出的文本

实现文本溢出：用省略号截断 Flex 容器中的文本通常会导致省略号不存在。当将结果与没有 Flexbox 的相同代码进行比较时，这一点变得很明显。

CSS 代码：

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

HTML 代码：

<h1 id="Flexible-Boxes">Flexible Boxes</h1>
<div class="flex-container">
<p><strong>观察到问题：</strong></p>
<p>未实现预期结果（应将文本截断为“ThisIsASAm...”）。相反，输出显示“ThisIsASamp”。</p>
<p><strong>原因：</strong></p>
<p>出现此问题是因为文本溢出属性必须应用于 Flex 子容器而不是父容器。这是因为父容器只有一行文本，不需要截断。</p>
<p><strong>解决方案：</strong></p>
<p>要解决这个问题，应该使用单独的类让孩子们控制截断。</p>
<p><strong>CSS代码：</strong></p>
<pre class="brush:php;toolbar:false">.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

此方法可确保 Flex 子级具有截断文本所需的样式，同时父容器仍可保持所需的布局。