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

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

Barbara Streisand
リリース: 2024-12-16 15:56:11
オリジナル
498 人が閲覧しました

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


を使用せずに改行を実現するCSS では

HTML では、
要素は通常、改行に使用されます。ただし、

<p>hello <br> How are you</p>
ログイン後にコピー
hello
How are you
ログイン後にコピー
ログイン後にコピー

出力:

p {
  white-space: pre;
}
ログイン後にコピー
<p>hello
How are you</p>
ログイン後にコピー
を使用した代替アプローチCSS


を使用せずに改行を実現するには、CSS プロパティの空白: pre を利用できます。このプロパティは、
 の動作を複製します。 <p><strong></strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">hello
How are you
ログイン後にコピー
ログイン後にコピー
white-space: pre の効果

white-space: pre プロパティはブラウザーに指示します。空白文字を HTML に記述されたとおりに維持するため。この場合、「こんにちは」と「お元気ですか」の間の改行は保持され、改行になります。代替アプローチの出力このメソッドは、HTML に不要なマークアップを追加せずに改行を作成する便利な方法を提供します。これは、改行が必要だが、
のようなセマンティック要素が必要な状況で特に便利です。 は適切ではありません。

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

ソース:php.cn
前の記事:CSS で角丸を簡単に作成するにはどうすればよいですか? 次の記事:Webkit 変換により Webkit ブラウザの固定配置が崩れるのはなぜですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート