HTMLコードのスペースと空白行について簡単に紹介します。

HTMLコード中の連続したスペースや空白行（改行）は、すべて1つのスペースとして表示されます。

<フォント 例1：（テキストコンテンツに連続したスペースがある場合）

コード

表示効果。 "grid"と"large"。 間がスペースだと、ただのスペースとして表示されます。

例2：（コードとコードの間に連続したスペースがある場合）

コード

表示効果：2つのspan要素の間のスペースは、"sign"と"and"の間に連続したスペースが1つだけ表示されます。

上記の2つの例は、HTMLコード中の連続したスペースは、表示時に1つのスペースとして表示され、残りの余分なスペースは削除、または無視されることを示しています。

段落のテキストは、pタグの中にあることを除けば、実際にはHTMLコードの一部であり、例2のスペースは2つのspanタグの間にある。

スペースを理解した上で、今度は空白行について見てみましょう、同じように

例3：（テキストコンテンツに空白行がある場合）

コード

表示効果：見ての通り、テキストコード中の5つの空行は、ちょうど1つのスペースとして表示されます。

例4：（要素・タグ間の空行）例2のスペースを空行に置き換えるだけで、表示は例2と同じになり、複数の空行は1つのスペースとしてのみ表示されるようになります。

証明する。HTMLコード中の連続したスペースや空白行（改行）は、すべて1つのスペースとして表示されます。

では、2文字の間隔を広げて、コード中の連続した空白や空行も連続した空白や空行として表示させたい場合はどうすればよいのでしょうか。実は、とても簡単なことなのです。

方法1. プリフォーマットタグ <pre> を使用することができ、スペースまたは空白行のいずれかが適用されます。

表示効果

方法2 スペースの代わりにスペース実体文字 &nbsp; を、空白行の代わりに改行タグ <br/> を使用すればよいのです。この方法は、思い通りの表示を得ることができますが、&nbsp;も<br/>もHTMLでは意味を持たないので、検索エンジンに最も優しい方法とは言えません。そのため、できるだけ使用しないことをお勧めします。また、&nbsp;は小文字でなければならず、最後のセミコロンは省略してはいけないことに注意してください。

方法3 (スペースの場合) 全角のスペースを使用する

全角のスペースは漢字として解釈されるため、HTMLの区切り文字として解釈されず、実際のスペース数で表示することができます。

質問です。全角入力はどのように使うのですか？

Sogou入力メソッドでは、例えば、通常はハーフアングル入力を使用しており、そのステータスバーに月のマークがあればハーフアングル入力、太陽のマークがあればフルアングル入力を使用していることを意味します。フルアングル/ハーフアングルの切り替えは、ロゴをクリックするか、Shift+Space（スペースバー）のショートカットで行えます。

            半角入力(月) 全角入力(太陽)

方法4 CSSのスタイルコントロールのword-spacingプロパティを使うと、単語（ワード）間の標準的な間隔を変更することができます。英語では2つの単語はスペースで区切られていることが分かっているので、word-spacingはその単語間のスペースの幅を変える（長くする、短くする）ことだと視覚的に考えることができる。

方法5. CSS スタイルの white-space プロパティを使用する。 この属性は、以下のことを宣言しています。 要素内の空白をどのように処理するか。

<テーブル 値 説明 通常 デフォルト。空白はブラウザに無視されます。 プリ 空白はブラウザによって保持されます。HTMLの<pre>タグと同じような動作になります。 ナウラップ テキストは改行されず、<br>タグに遭遇するまで同じ行を進みます。 プリラップ 空白の並びを維持しつつ、通常通り改行を行う。 プリライン 空白文字の並びをマージし、改行は維持します。

white-space:normal;は設定されていないように通常で、連続したスペースも空白行も1つだけ表示されます。

改行がないwhite-space:nowrap;とはどういう意味ですか？通常、テキストがテキストフィールドの外に出た場合、テキストは自動的に折り返されます。この設定は、自動的に折り返す代わりに、改行タグ <br /> に当たったときだけ折り返すことを意味します。

white-space:pre; 方法1と同じで、テキストをそのまま出力します。テキストがテキストフィールドの外に出た場合、改行されず、スクロールバーが発生します。

white-space:pre-wrap; 空白と空白行を維持し、テキストがテキストフィールドからはみ出したときに自動的に折り返します。

white-space:pre-line; 連続したスペースは1つのスペースとして表示されますが、連続した空白行は保存されます。

以上、HTMLコードのスペースと空白行についてでしたが、スクリプトハウスを応援していただけると嬉しいです

元記事は以下の通りです。 http://www.cnblogs.com/web-HCJ/p/4543093.html