ホームページ >ウェブフロントエンド >CSSチュートリアル >改行で消える水平リスト用のレスポンシブセパレーターを作成するにはどうすればよいですか?

改行で消える水平リスト用のレスポンシブセパレーターを作成するにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-17 14:55:10557ブラウズ

How to Create a Responsive Separator for Horizontal Lists That Disappears on Line Breaks?

水平リストのレスポンシブセパレーター

質問:

行のセパレーターを削除するにはどうすればよいですか?ビューポートの変更による中断サイズ?

例:

|項目 1 |項目 2 |項目 3 |項目 4 |項目 5 |
|---|---|---|---|---|

ビューポートが狭くなる場合:

Item 1 Item 2 Item 3
Item 4 Item 5

区切り文字が改行位置に残ることに注意してください。

可能解決策:

CSS のみ:

末尾の空白の折りたたみを利用できます:

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

以上が改行で消える水平リスト用のレスポンシブセパレーターを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。