「 」の違いは何ですか そして「」?


146

どちらもスペースを意味しますが、何か違いはありますか?

回答:


195

1つは分割しないスペースで、もう1つは通常のスペースです。改行しないスペースは、単語の途中で折り返されないのと同じように、その時点で行を折り返さないことを意味します。

さらに、スベンドが彼のコメントで指摘しているように、非破壊スペースは崩壊していません。


42
  折りたたみもできません。これはおそらくそれらの使用の最も重要な側面です(少なくとも、それは私がそれらを使用する傾向があり、詰め物を入れるのが速くて簡単です)
Svend

47
Protip:スペースを空けるために15%nbsp;を続けて使用しないでください。人々がそうしているのを見たとき、私を狂気にさせます。CSSのパディングまたはマージンを使用します。
マシューラパティ

5
Microsoft Wordがそれをしているのを見たとき、それは私を狂気に駆り立てます…
Josh Lee

@Amarghosh:私がいつもなりたかった一種のグル... :)
ブライアン・ラスムッセン

1
他のサイズの間隔エンティティもあり&hairsp      、[ jsfiddle.net/medmunds/4crt3c9j/]
Mark Gavagan

70

エンティティ は改行しないスペースを生成します。このスペースは、その位置で自動改行が不要な場合に使用されます。通常のスペースには文字コード32があり、改行しないスペースには文字コード160があります。

たとえば、スペースを3桁ごとに区切った数値(1 234 567)を表示する場合は、改行しないスペースを使用して、数値を別の行に分割できないようにします。通貨を表示し、金額と通貨の間にスペースがある場合(42 SEK)、改行しないスペースを使用して、1行に金額が表示され、次の行に通貨が表示されないようにします。


3
nbspの使用の良い例。自分で探していましたが、思いつきませんでした。
ピート

47

ここでの他の回答に加えて、改行しないスペースは通常のスペースのように「折りたたまれ」ません。たとえば、両方

<p>Word1          Word2</p>

そして

<p>Word1 Word2</p>

どのブラウザでも同じようにレンダリングされますが、

<p>Word1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Word2</p>

レンダリング時にスペースが保持されます。


いいえ、その後、&amp; 全体。&ampは解釈されませんでしたが、&nbspは解釈されました。
Graeme Perrow、

33

例ほど答えではない...

例#1:

<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
    Hello&nbsp;There
</div>  

例2:

<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
    Hello There
</div>

そしてフィドルへのリンク。


2
私の別の答えを一瞥する必要はありません。9年、まだ有効です。
snr 2018年

10

ここで実際の例を見ることができます:

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 &nbsp;]</div>

私に説明してもらえますか、なぜこの回答に反対票を投じるのですか?
alberto-bottarini 2015年

私はそれを賛成しました。それは物事を説明していないと思います。しかし、あなたは有用な視覚的なものを指摘しています。
Nishant 2016年

1
SOの質問と回答は自己完結型であることになっています。完全な回答直接投稿に含まれている場合は、codepenへの外部リンク許可されます。SOポリシーに準拠するには、結果のコード出力を回答に含めるか、SO独自の埋め込みバージョンのコードペンを追加して、ビジターがコードを実行し、外部ページに移動せずに結果を確認できるようにします。自己完結型ポリシーの理由は、リンクが到達不能になると、答えが役に立たなくなるためです。また、回答を得るためだけにユーザーが離れる必要があるのは、UXが貧弱ですedit
SherylHohman

6

複数の通常の空白文字(スペース、タブ、改行)は、単一の空白文字として扱われます

を除くすべてのHTML要素でPRE、空白のシーケンスは「単語」を分離します(ここで「単語」という用語は、「空白以外の文字のシーケンス」を意味するために使用します)。テキストをフォーマットするとき、ユーザーエージェントはこれらの単語を識別し、特定の書かれた言語(スクリプト)とターゲットメディアの規則に従ってレイアウトする必要があります。

そう

foo    bar

として表示されます

foo bar

ただし、ノーブレークスペースは常に表示されます。そう

foo&‍nbsp;&‍nbsp;&‍nbsp;bar

として表示されます

foo   bar

5

すでに述べたように、「ノーブレークスペース」がある場合は改行されません。

また、 ""のみを含む要素は正しく表示されない可能性があることに注意してください。動作します。つまり、少なくともIE 6(私が覚えている限り、IE7には同じ問題があります)で、空のテーブル要素がある場合、コンテンツがない、または白だけの場合、要素にスタイル、たとえば境界線が適用されません。スペース。したがって、次のものは境界線付きでレンダリングされません。

<td></td>
<td> <td>

この例では境界線が表示されますが、

<td>& nbsp;</td>

うーん-ダミースペースに入れて、ここで正しくレンダリングする必要がありました


@Stewart -ではなく、コードexmpleで、私はアンプと試みたが、それがテキストで働いていた-それはまた、「アンペア」の部分アウト書いたので
ピート

非常に奇妙な。明らかにバグです。
スチュワート

2

1つ目はHTMLパーサーによって空白として扱われません。2つ目は空白です。その結果、「」は特定のHTMLマークアップ内での表示を保証されませんが、分割できないスペースは常に表示されます。


1

&nbsp; 空白として扱う必要があります。

&nbsp;&nbsp; 2つの空白として処理する必要があります

''は、興味のない空白として扱うことができます

'' + ''は単一の ''として処理できます


1

&nbsp; 積み重ね可能です。つまり、複数のスペースをまとめて作成できます。

HTMLは1つのスペースのみを解析します ''そしてそれは残りを落とします...

5つのスペースが必要な場合は、5 xを配置します &nbsp;


0

@Zoidbergは正しい例です。

<h1>title</h1> <h2>date</h2>

ヘッダーマークアップ間のスペースを表示しません。

& nbsp ; 

スペースを作ります:)


0

改行がある場合、$ bnspを使用しても改行されません。それは「途切れない空間」だからです。これは、常に一緒に書かれる特定の製品名などがある場合に重要になることがあります。

フランスで12 344 567と表示される12344567のように、空白を数字の区切り文字として使用する必要がある場合は、興味深いことがあります。行がなければ、数の真ん中で線が途切れ、非常に醜いでしょう。テスト:12 344 567


0

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&nbsp;&nbsp;&nbsp;There</p>

次に、より明確に指示したように、スペースをレンダリングします。これらのスペースをスタイリングに使用したいくつかの歴史があります。CSSが成熟するにつれ、この使用法は多少減少しました。ただし、HTML文字エンティティの多くにはまだ有効な使用方法があります。たとえば、コードを表示したい場合など、予期せず/意図せずに解釈されないようにします。W3は、他の文字コードを表示するのに最適なページがあります


試す:<p>Hello &nbsp; There</p>または<p>Hello &nbsp; &nbsp; &nbsp; There</p>(分割が問題にならない場合は、毎回の前後に通常の空のスペースを使用してビットを節約できます&nbsp;)。
サイボーグ、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.