為什麼我的「text-overflow: ellipsis」不起作用？

text-overflow: ellipsis Not Functioning

當瀏覽器視窗變窄時，嘗試使用省略號縮小範圍，使用了以下程式碼：

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

但是，這段程式碼並沒有產生預期的效果。若要進行故障排除，請務必確保存在以下 CSS 屬性：

• 溢位： 此屬性控制內容應如何流出其容器。
• Width（或max-width）：此屬性決定了最大寬度span.
• 顯示： 此屬性指定跨度應如何顯示，通常設定為內聯、區塊或內聯塊。
• 空白: 此屬性指示如何處理跨度內的空白。

這是一個範例包含以下屬性的修正程式碼：

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

透過合併這些 CSS 屬性，當視窗變窄時，跨度現在應該用省略號縮小。

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