CSS のインライン コンテンツ内で改行を強制する方法は?

CSS のインライン コンテンツ内で改行を強制する

美的または組織的な目的でインライン コンテンツ内で改行が必要な状況が発生する可能性があります。目的。 CSS には特定の要素を選択するメソッドが用意されていますが、特定のインライン ブロック項目の後で改行を強制するタスクは困難になります。

提供された HTML および CSS コードでは、リスト項目は最初は水平方向に表示されます。単一の行。ただし、望ましい結果は、それらを 3 つの列に分散することです。
を使用して改行を追加するなどの従来の解決策

CSS の制限:

CSS には、インライン要素またはインラインブロック要素内に直接改行を挿入する専用の機能がありません。この制限は、本質的に改行をサポートしないこれらの表示値の性質に起因します。

代替アプローチ:

実証された回避策には、疑似要素 ( :after) は 3 番目のリスト項目です。この疑似要素には、改行文字を表す「A」という内容と、改行を維持するための「pre」という空白プロパティが与えられます。

注:

ここで紹介したアプローチは、インライン要素を使用する場合に適用できます。インラインブロック要素を扱う場合、この方法は効果がありません。このようなシナリオでは、CSS グリッドやフレックスボックスなどの代替ソリューションの方が適切な場合があります。

以上がCSS のインライン コンテンツ内で改行を強制する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。