為什麼「text-overflow: ellipsis」在 Flexbox 中無法如預期運作？

text-overflow 與 Flexbox 不相容

在此範例中，我們有一個文字內容為「ThisIsASampleText」的 Flex 容器。當我們將“display”屬性設為“flex”並將“text-overflow”設為“ellipsis”時，我們期望文字被截斷，但它沒有按預期工作。

檢查程式碼，我們注意到flex 屬性應用於容器元素。但是，Flexbox 樣式應該會套用於子元素以影響其佈局和屬性。

要解決此問題，我們可以將「文字溢位」和相關樣式移至 Flex 子元素的單獨類別中。修改後的程式碼如下：

.flex-container {<br> display: flex;<br> text-align: left;<br>}<p>.flex-child {<br> 空白：nowrap；<br> 溢出：隱藏；<br>文字溢位：省略號;<br>}</p><p></p><h1 id="彈性框">彈性框</h1><br><div> <span class="flex-child">ThisIsASampleText</span><br> div><p>透過將截斷樣式應用於「.flex-child」類，我們現在在Flex容器中將文字正確截斷為“ThisIsASAm...”。有關詳細說明，請參閱下面連結的 CSS Tricks 參考文章。 </p>
<p>參考：https://css-tricks.com/flexbox-truncated-text/</p>
</div>

以上是為什麼「text-overflow: ellipsis」在 Flexbox 中無法如預期運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！