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

Barbara Streisand
リリース: 2024-10-30 19:35:30
オリジナル
919 人が閲覧しました

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 サイトの他の関連記事を参照してください。

  • ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!