改行で消える水平リスト用のレスポンシブ CSS 専用セパレーターを作成する方法

レスポンシブ水平リストの 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 中国語 Web サイトの他の関連記事を参照してください。