ホームページ >ウェブフロントエンド >CSSチュートリアル >` タグを使用せずに CSS で改行を作成するにはどうすればよいですか?

` タグを使用せずに CSS で改行を作成するにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-17 09:23:25989ブラウズ

How Can I Create Line Breaks in CSS Without Using `` Tags?

HTML タグを使用せずに CSS で改行を実現する

Web デザインでは、テキストを整理して読みやすい方法で表示するために改行が不可欠です。伝統的に、
タグは改行を作成するために使用されています。ただし、
を使用せずに同じ出力を達成することが望ましい場合もあります。

問題:

を使用せずに CSS で改行を作成するにはどうすればよいですか?
を使用します。タグ?次の例を考えてみましょう:

<p>hello <br> How are you</p>

このコードは次の出力を生成します:

hello
How are you

解決策:


を使用すると、CSS プロパティ white-space: pre; を適用できます。このプロパティは、要素のコンテンツを改行を保持したフォーマット済みテキストとして扱うようにブラウザに指示します。

次の例では、white-space: pre; プロパティを

に適用します。要素:

p {
  white-space: pre;
}
<p>hello 
How are you</p>

このコードは、
と同じ改行動作を生成します。 tag:

hello
How are you

white-space: pre; を利用すると、追加のマークアップを必要とせずに CSS で改行を作成でき、コードを簡素化し、よりセマンティックなアプローチを維持できます。

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

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