HTMLのテキスト内のスペースを保持する方法

HTML では、white-space 属性を使用してテキスト内のスペースを保持できます。要素内で "white-space:pre|pre-line" スタイルを設定するだけで済みます。 White-space 属性は、レイアウト プロセス中に要素内の空白文字を処理する方法を宣言します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

html 内のスペースの規則

HTML コンテンツ内の複数のスペースは、通常 1 つとみなされ、連続する複数のスペース文字は自動的にマージされます。同時に、コンテンツの前後のスペースも次のようにクリアされます。

<p> fly63   com </p>　

表示効果は次のとおりです。

fly63 com　

注: ブラウザのこのメカニズムは、通常のスペース キー以外。タブ文字 (\t) と改行文字 (\r および \n) を含め、改行は
タグを使用して明示的に表すことができます。white-space 属性は、要素内で空白をどのように配置するかを設定します扱われます。

この属性は、レイアウト プロセス中に要素内の空白文字を処理する方法を宣言します。 pre-wrap と pre-line の値は CSS 2.1 で新しく追加されました。

1. CSS では、空白属性の値が pre の場合、

 タグと同じように処理されます。ブラウザはテキスト内のスペースと改行を保持します。例: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><p style="white-space:pre"> fly63  com <p>

ログイン後にコピー

表示効果は次のとおりです: ' fly63 com '

2. CSS の空白属性が pre の場合-line は、改行が保持されることを意味します。そのまま出力される改行文字を除いて、他のすべてはwhite-space:normalルールと一致します。

<p style="white-space: pre-line">
	fly63
	com
</p>

表示効果:

'fly63

com'

推奨学習:

html ビデオ チュートリアル

以上がHTMLのテキスト内のスペースを保持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。