回答:
1つは分割しないスペースで、もう1つは通常のスペースです。改行しないスペースは、単語の途中で折り返されないのと同じように、その時点で行を折り返さないことを意味します。
さらに、スベンドが彼のコメントで指摘しているように、非破壊スペースは崩壊していません。
&hairsp      、[ jsfiddle.net/medmunds/4crt3c9j/]
エンティティ は改行しないスペースを生成します。このスペースは、その位置で自動改行が不要な場合に使用されます。通常のスペースには文字コード32があり、改行しないスペースには文字コード160があります。
たとえば、スペースを3桁ごとに区切った数値(1 234 567)を表示する場合は、改行しないスペースを使用して、数値を別の行に分割できないようにします。通貨を表示し、金額と通貨の間にスペースがある場合(42 SEK)、改行しないスペースを使用して、1行に金額が表示され、次の行に通貨が表示されないようにします。
ここでの他の回答に加えて、改行しないスペースは通常のスペースのように「折りたたまれ」ません。たとえば、両方
<p>Word1 Word2</p>
そして
<p>Word1 Word2</p>
どのブラウザでも同じようにレンダリングされますが、
<p>Word1 Word2</p>
レンダリング時にスペースが保持されます。
ここで実際の例を見ることができます:
http://codepen.io/anon/pen/GJzBxo
そして
http://codepen.io/anon/pen/LVqBQo
同じdiv、同じテキスト、異なる「スペース」
<div style="width: 500px; background: red"> [loooong text with spaces]</div>
対
<div style="width: 500px; background: red"> [loooong text with ]</div>
edit
複数の通常の空白文字(スペース、タブ、改行)は、単一の空白文字として扱われます。
を除くすべてのHTML要素で
PRE、空白のシーケンスは「単語」を分離します(ここで「単語」という用語は、「空白以外の文字のシーケンス」を意味するために使用します)。テキストをフォーマットするとき、ユーザーエージェントはこれらの単語を識別し、特定の書かれた言語(スクリプト)とターゲットメディアの規則に従ってレイアウトする必要があります。
そう
foo bar
として表示されます
foo bar
ただし、ノーブレークスペースは常に表示されます。そう
foo   bar
として表示されます
foo bar
すでに述べたように、「ノーブレークスペース」がある場合は改行されません。
また、 ""のみを含む要素は正しく表示されない可能性があることに注意してください。動作します。つまり、少なくともIE 6(私が覚えている限り、IE7には同じ問題があります)で、空のテーブル要素がある場合、コンテンツがない、または白だけの場合、要素にスタイル、たとえば境界線が適用されません。スペース。したがって、次のものは境界線付きでレンダリングされません。
<td></td>
<td> <td>
この例では境界線が表示されますが、
<td>& nbsp;</td>
うーん-ダミースペースに入れて、ここで正しくレンダリングする必要がありました
空白として扱う必要があります。
2つの空白として処理する必要があります
''は、興味のない空白として扱うことができます
'' + ''は単一の ''として処理できます
積み重ね可能です。つまり、複数のスペースをまとめて作成できます。
HTMLは1つのスペースのみを解析します ''そしてそれは残りを落とします...
5つのスペースが必要な場合は、5 xを配置します
@Zoidbergは正しい例です。
<h1>title</h1> <h2>date</h2>
ヘッダーマークアップ間のスペースを表示しません。
& nbsp ;
スペースを作ります:)
改行がある場合、$ bnspを使用しても改行されません。それは「途切れない空間」だからです。これは、常に一緒に書かれる特定の製品名などがある場合に重要になることがあります。
フランスで12 344 567と表示される12344567のように、空白を数字の区切り文字として使用する必要がある場合は、興味深いことがあります。行がなければ、数の真ん中で線が途切れ、非常に醜いでしょう。テスト:12 344 567
TLDR; 受け入れられた答えに加えて; 1つは暗黙的で、もう1つは明示的です。
アプリケーション/ライブラリ/フレームワークによって作成または生成したHTMLがブラウザーで読み取られる場合、HTMLの意味を解釈するのが最善です(ブラウザーによって異なります)。HTMLエンティティコードを使用すると、ブラウザにより限定されます。ユーザーに文字を表示することを明示的に伝えています(たとえば、開発者が読みやすくするためにHTMLの間隔を空けているわけではありません)。
より具体的には、出力HTMLが次の場合:
<html>
<title>hello</title>
<body>
<p>
Tell me and I will forget. Teach me and I
may remember. Involve me and I will learn.
</p>
</body>
</html>
ブラウザは、これらすべての単語の間に1つのスペースのみをレンダリングします(開発者が読みやすくするためにインデントされているものも含みます)。
ただし、同じものを配置し、<p>タグを次のように変更した場合:
<p>Hello There</p>
次に、より明確に指示したように、スペースをレンダリングします。これらのスペースをスタイリングに使用したいくつかの歴史があります。CSSが成熟するにつれ、この使用法は多少減少しました。ただし、HTML文字エンティティの多くにはまだ有効な使用方法があります。たとえば、コードを表示したい場合など、予期せず/意図せずに解釈されないようにします。W3は、他の文字コードを表示するのに最適なページがあります。
<p>Hello There</p>または<p>Hello There</p>(分割が問題にならない場合は、毎回の前後に通常の空のスペースを使用してビットを節約できます )。