ホームページ  >  記事  >  ウェブフロントエンド  >  CSSのみを使用して要素の後に改行を強制できますか?

CSSのみを使用して要素の後に改行を強制できますか?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-30 19:35:30919ブラウズ

Can You Force a Line Break After an Element Using Only CSS?

CSS で改行を作成する

改行が必要ですが、余分な HTML タグを追加したくないですか? CSS がカバーします。

質問:

CSS のみを使用して要素の後に改行を強制できますか? HTML タグを追加せずに、

チャレンジ:

<code class="html"><li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li></code>

があるとします。

  • 内にある要素:

    の後に改行が必要です。しかし、以前はインラインのままでした。ただし、display:block;を設定すると、要素の位置が崩れてしまうため、これはオプションではありません。

    <code class="css">h4 {
      display: inline;
    }
    h4:after {
      content: "\a";
      white-space: pre;
    }</code>

    解決策:

    いくつかの賢い CSS を使用すると、これを実現できます:
    • 説明:
    表示: インライン;

    を保持します。

    h4:after は、

    の後に擬似要素を作成します。 Unicode 文字「a」(改行) を挿入します。

    white-space: pre;挿入された改行が表示されるようにします。

    例:ライブ デモについては、このフィドルを確認してください: http://jsfiddle.net/Bb2d7 /

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

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