為什麼「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 子級具有截斷文字所需的樣式，同時父容器仍可保持所需的佈局。