為什麼「text-overflow: ellipsis」不適用於我的 Span 元素？

「text-overflow: ellipsis」不起作用

嘗試使用「text-overflow: ellipsis」截斷< 中的文字時;跨距>元素，當視窗尺寸減小時，省略號不會出現。

解決方案

要啟用「text-overflow: ellipsis」功能，需要包含除了「text-overflow」之外，還包含以下CSS 屬性：

• 溢位： 確保元素的內容超出其包含區域且不被隱藏
• 寬度（或最大寬度）： 定義包含文字的元素的最大寬度
• 顯示： 指定元素的顯示類型（例如，區塊, inline-block)
• 空白： 控制如何在元素內處理空格

範例程式碼

解釋

在提供的範例中，元素的寬度為100px，overflow 屬性設定為“hidden”，確保任何多餘的內容都隱藏在元素的邊界內。顯示屬性設定為“block”以強制元素佔據矩形空間區塊。最後，將空白屬性設為「nowrap」以防止文字內換行。

應用這些屬性後，「text-overflow: ellipsis」屬性將發揮作用，截斷< 內的文字;跨度>元素並在視窗大小減小到文字超出元素寬度的程度時添加省略號(. ..)。

以上是為什麼「text-overflow: ellipsis」不適用於我的 Span 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！