DIV CSS 佈局教程網

HTML 代碼中的所有連續的空格或空行（換行）都會被顯示為一個空格。

例子1：（文本內容中的連續空格）

代碼

XML/HTML Code復制內容到剪貼板

1. <p>這段文本中，輸入連續的空格          大概輸入了十個。</p>  

顯示效果：“格”和“大”之間的是個空格顯示出來只是一個空格。

XML/HTML Code復制內容到剪貼板

1. 這段文本中，輸入連續的空格 大概輸入了十個。  

例子2：（代碼之間的連續空格）

代碼

XML/HTML Code復制內容到剪貼板

1. <span>span是一個行內標簽</span>               <span>和前面的span元素之間隔了很多個空格</span>  

顯示效果:兩個span元素之間連續的空格，顯示出來即"簽"與“和”之間的空格，只有一個空格。 XML/HTML Code復制內容到剪貼板

1. span是一個行內標簽 和前面的span元素之間隔了很多個空格  

上面兩個例子證明：HTML代碼中連續的空格在顯示時會顯示為一個空格，其余的多余的空格會被移除或者說被忽略。

段落文本其實也是HTML代碼的一部分，只不過它在p標簽內部，而例子2的空格是在兩個span標簽之間。

理解了空格，現在看看空行，同理

例子3：（文本內容中的空行）

代碼

XML/HTML Code復制內容到剪貼板

1. <p>這段文本中，輸入連續的空行  
2.   
3.   
4.   
5.   
6.   
7. 大概輸入了五行。</p>  

顯示效果：如我們所見，文本代碼中的五行空行，顯示出來也只是一個空格。

XML/HTML Code復制內容到剪貼板

1. 這段文本中，輸入連續的空行 大概輸入了五行。  

例子4：（元素之間/標簽之間的空行），只要把例子2中的空格換成空行就可以了，顯示效果和例子2的一樣，多行空行都只會顯示為一個空格。

XML/HTML Code復制內容到剪貼板

1. <span>span是一個行內標簽</span>  
2.   
3.   
4.   
5.   
6.   
7. <span>和前面的span元素之間隔了很多空行</span>  

XML/HTML Code復制內容到剪貼板

1. span是一個行內標簽 和前面的span元素之間隔了很多空行  

得證：HTML 代碼中的所有連續的空格或空行（換行）都會被顯示為一個空格。

既然如此，如果我們希望擴大兩個字符之間的間距，讓代碼中的連續空格或空行顯示出來的結果也是連續的空格或空行，那該怎麼辦？其實很簡單。

方法一：我們可以用預格式化標簽<pre>，無論是空格或空行都適用。

XML/HTML Code復制內容到剪貼板

1. <pre>  
2. 這是  
3. 預格式文本。  
4. 它保留了      空格  
5. 和換行。  
6. </pre>  

顯示效果 XML/HTML Code復制內容到剪貼板

1. 這是  
2. 預格式文本。  
3. 它保留了      空格  
4. 和換行。  

方法二：我們可以用空格實體符&nbsp;代替空格，用換行標簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果，但是對搜索引擎不是最友好的方式，因為&nbsp;和<br/>在HTML中都是沒有語義的。所以建議盡量少用。另外需要注意的是，&nbsp; 必須小寫，而且最後面的分號是不能省略的。

 

方法三：（適合空格）使用全角空格

全角空格被解釋為漢字，所以不會被被解釋為HTML分隔符，可以按照實際的空格數顯示。

問題：怎麼使用全角輸入法？

以搜狗輸入法為例，我們通常使用的是半角輸入，其狀態欄中有個月亮的標志，就說明正在使用的是半角輸入，如果是太陽的標志，就說明使用的是全角輸入。全角/半角的切換可以通過點擊標志，也可以通過快捷鍵 Shift+Space（空格符）切換。

            半角輸入（月亮）                                   全角輸入（太陽）

方法四：使用CSS樣式中字間隔屬性控制，CSS中的word-spacing 屬性可以改變字（單詞）之間的標准間隔。我們知道英文中兩個單詞之間是通過空格隔開的，所以我們視覺上可以這樣認為，word-spacing改變了（拉長或縮短）單詞之間那個空格的寬度。

方法五：使用CSS樣式中的white-space 屬性，這個屬性聲明如何處理元素內的空白符。

值 描述 normal 默認。空白會被浏覽器忽略。 pre 空白會被浏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。 nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 pre-wrap 保留空白符序列，但是正常地進行換行。 pre-line 合並空白符序列，但是保留換行符。

white-space:normal;就是正常，和不設置一樣，連續空格和空行都只會顯示一個空格。

white-space:nowrap;不換行是什麼意思呢？正常情況下，當我們的文本超出了文本域，文本就會自動折行，這個設置就是說不自動折行了，而是碰到換行標簽<br />才換

white-space:pre;和方法一相同，將文本原樣輸出顯示。當文本超出文本域時，不換行，會產生滾動條。

white-space:pre-wrap;保留空格和空行，但當文本超出文本域時，會自動換行。

white-space:pre-line;連續的空格會顯示為一個空格，但保留連續的空行。

以上就是小編為大家帶來的淺談HTML代碼中的空格和空行全部內容了，希望大家多多支持腳本之家~

原文地址：http://www.cnblogs.com/web-HCJ/p/4543093.html