レスポンシブ ナビゲーションのコンテキストで、リスト項目間のセパレーターを次の位置で削除するにはどうすればよいですか?ビューポートの変化によって生じる改行サイズ?
次のシナリオを考えてみましょう:
ワイドビューポート:
-> Item 1 | Item 2 | Item 3 | Item 4 | Item 5 <-
小さいビューポート:
-> Item 1 | Item 2 | Item 3 <- -> Item 4 | Item 5 <-
ただし、場合によっては、この例に示すように、区切り文字は改行位置に残る場合があります。 fiddle.
末尾および行末の空白の自動折りたたみを利用することで、応答性の高い区切り文字を作成できます:
b { background: red; outline: 1px solid blue; } div { resize: both; overflow: hidden; }
<div> word<b> </b>.repeat(42) </div>
以上が改行で消える水平リスト用のレスポンシブ CSS 専用セパレーターを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。