首頁 > web前端 > css教學 > 為什麼我的「text-overflow: ellipsis」不起作用?

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

Mary-Kate Olsen
發布: 2024-11-10 19:51:03
原創
609 人瀏覽過

Why Isn't My `text-overflow: ellipsis` Working?

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板