ホームページ >ウェブフロントエンド >CSSチュートリアル >HTMLタグなしでCSSで改行を実現するにはどうすればよいですか?

HTMLタグなしでCSSで改行を実現するにはどうすればよいですか?

DDD
DDDオリジナル
2024-10-31 08:26:29952ブラウズ

How to Achieve Line Breaks in CSS Without HTML Tags?

HTML タグを使用しない CSS 改行

追加の HTML 要素を導入せずに CSS のみで改行を実現するには、次の方法を使用します。 :

問題:

箇条書きリストで、

の後に改行を入れたいとします。

要素を維持しますが、その前ではありません。同じ線上にあります。従来のソリューションでは、display: block; を設定することを提案しています。

CSS 解決策:

解決策は、CSS 疑似要素を使用して、改行。 CSS コードは次のとおりです。

h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}

説明:

  • display: inline;

    を保持します。

  • h4:after は、

    の後に擬似要素を作成します。 element.

  • 内容: "a";
  • white-space: pre; 擬似要素に改行文字を挿入します。

デモ:

この手法の例は、次の場所にあります: http://jsfiddle.net/Bb2d7/

出典:

このトリックのインスピレーションは、StackOverflow の回答から来ました: https://stackoverflow.com/a/66000/509752

以上がHTMLタグなしでCSSで改行を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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