マークアップの表示フォーマット

Question

これらの2つのnav要素が画面に表示される方法に違いがあるのはなぜですか？このfiddleからわかるように、書式設定されていないnavは、divの最後に到達すると正しくラップされず、代わりに境界線をオーバーフローしますが、フォーマットされたマークアップは期待通りに動作します。なぜHTMLの空白が無意味であると思われるのでしょうか？ラインなし

Fiddle

は、リンク間破る：ラインで

<a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a><a href="/">Link 4</a><a href="/">Link 5</a><a href="/">Link 6</a><a href="/">Link 7</a><a href="/">Link 8</a>    </nav> 

は、リンク間破る：

<nav class="service__nav"> 
    <a href="/">Link 1</a> 
    <a href="/">Link 2</a> 
    <a href="/">Link 3</a> 
    <a href="/">Link 4</a> 
    <a href="/">Link 5</a> 
    <a href="/">Link 6</a> 
    <a href="/">Link 7</a> 
    <a href="/">Link 8</a> 
</nav> 

Answer 1

スペースは、単語の終わりを示します。

<a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a> 

：ブラウザがそれらの間に線を破壊しないように、単語の終わりを示すための要素の間にスペースは、ありません

1. ：ので、未フォーマットのHTMLは折り返されません。 <a>要素には、スペースを持っているが、それらの内側のラインを壊さないように、ブラウザをno-wrap伝えます：

   .service__nav a { 
       white-space: nowrap; 
   } 
   

あなたはいけないだけ<a>要素の間にスペースを追加し、HTMLをフォーマットする必要があります。

<nav class="service__nav"> 
<a href="/">LinkTest One</a> <a href="/">LinkTest Two</a> <a href="/">LinkTest Three</a> <a href="/">LinkTest Four</a> 
</nav> 

はJSFiddle