首頁 > web前端 > css教學 > 如何為換行時消失的水平清單建立僅 CSS 的響應式分隔符號?

如何為換行時消失的水平清單建立僅 CSS 的響應式分隔符號?

Mary-Kate Olsen
發布: 2024-12-16 10:43:10
原創
486 人瀏覽過

How to Create Responsive CSS-Only Separators for Horizontal Lists That Disappear on Line Breaks?

響應式等級清單的CSS 分隔符號

在響應式導覽的上下文中,如何刪除清單項目之間的分隔符不同視口引起的換行尺寸?

響應式分隔符號

考慮以下場景:

  • 寬視口:

    -> Item 1 | Item 2 | Item 3 | Item 4 | Item 5 <-
    登入後複製
  • 小視窗:

    -> Item 1 | Item 2 | Item 3 <-
    -> Item 4 | Item 5 <-
    登入後複製

但是,在某些情況下,分隔符號可能會保留在換行符處,如此所示fiddle.

純CSS 解決方案

透過利用尾隨和行尾隨空白的自動折疊,我們可以建立響應式分隔符號:

b {
    background: red;
    outline: 1px solid blue;
}
div {
    resize: both;
    overflow: hidden;
}
登入後複製
<div>
word<b> </b>.repeat(42)
</div>
登入後複製

以上是如何為換行時消失的水平清單建立僅 CSS 的響應式分隔符號?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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