CSS を使用してインラインブロック要素で改行を強制できますか?

CSS での改行操作の紹介

Web レイアウトの領域では、CSS は要素のスタイル設定と配置に重要な役割を果たします。デザイナーが直面する一般的な課題の 1 つは、特定のインライン コンテンツ要素内に改行を挿入する必要があることです。これは簡単な作業のように思えるかもしれませんが、CSS には型破りなアプローチを必要とする固有の制限があります。

float プロパティや display:table-cell プロパティを使用せずに項目のリストを複数の列に分割するシナリオを考えてみましょう。デフォルトでは、CSS はインライン要素またはインラインブロック要素内に改行を挿入するメカニズムを本質的に提供しません。

ただし、インライン要素には賢明な回避策が存在します。次の CSS を使用すると、3 番目のリスト項目の後に改行を導入できます:

li {
    display: inline;
}

li:nth-child(3):after {
    content: "\A";
    white-space: pre;
}

このソリューションでは、:after 疑似メソッドを使用して、指定された要素の後に「ソフト」改行を強制します。 -A (改行の制御コード) 文字を含む要素。空白: pre は、改行が通常のフローの一部としてレンダリングされることを保証します。

残念ながら、この回避策はインライン ブロック要素には適用されません。同様の手法をインラインブロック要素に適用しようとしても、目立った効果は得られません。したがって、この特定のケースでは、純粋な CSS を使用してインライン ブロック コンテンツ内で改行を強制することは不可能です。

以上がCSS を使用してインラインブロック要素で改行を強制できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。