HTML 代碼中的所有連續(xù)的空格或空行（換行）都會(huì)被顯示為一個(gè)空格。
例子1：（文本內(nèi)容中的連續(xù)空格）
代碼
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <p>這段文本中，輸入連續(xù)的空格 大概輸入了十個(gè)。</p>
顯示效果：“格”和“大”之間的是個(gè)空格顯示出來(lái)只是一個(gè)空格。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- 這段文本中，輸入連續(xù)的空格 大概輸入了十個(gè)。
例子2：（代碼之間的連續(xù)空格）
代碼
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <span>span是一個(gè)行內(nèi)標(biāo)簽</span> <span>和前面的span元素之間隔了很多個(gè)空格</span>
顯示效果:兩個(gè)span元素之間連續(xù)的空格，顯示出來(lái)即"簽"與“和”之間的空格，只有一個(gè)空格。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- span是一個(gè)行內(nèi)標(biāo)簽 和前面的span元素之間隔了很多個(gè)空格
上面兩個(gè)例子證明：HTML代碼中連續(xù)的空格在顯示時(shí)會(huì)顯示為一個(gè)空格，其余的多余的空格會(huì)被移除或者說(shuō)被忽略。
段落文本其實(shí)也是HTML代碼的一部分，只不過(guò)它在p標(biāo)簽內(nèi)部，而例子2的空格是在兩個(gè)span標(biāo)簽之間。
理解了空格，現(xiàn)在看看空行，同理
例子3：（文本內(nèi)容中的空行）
代碼
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <p>這段文本中，輸入連續(xù)的空行
-
-
-
-
-
- 大概輸入了五行。</p>
顯示效果：如我們所見(jiàn)，文本代碼中的五行空行，顯示出來(lái)也只是一個(gè)空格。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- 這段文本中，輸入連續(xù)的空行 大概輸入了五行。
例子4：（元素之間/標(biāo)簽之間的空行），只要把例子2中的空格換成空行就可以了，顯示效果和例子2的一樣，多行空行都只會(huì)顯示為一個(gè)空格。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <span>span是一個(gè)行內(nèi)標(biāo)簽</span>
-
-
-
-
-
- <span>和前面的span元素之間隔了很多空行</span>
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- span是一個(gè)行內(nèi)標(biāo)簽 和前面的span元素之間隔了很多空行
得證：HTML 代碼中的所有連續(xù)的空格或空行（換行）都會(huì)被顯示為一個(gè)空格。
既然如此，如果我們希望擴(kuò)大兩個(gè)字符之間的間距，讓代碼中的連續(xù)空格或空行顯示出來(lái)的結(jié)果也是連續(xù)的空格或空行，那該怎么辦？其實(shí)很簡(jiǎn)單。
方法一：我們可以用預(yù)格式化標(biāo)簽<pre>，無(wú)論是空格或空行都適用。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <pre>
- 這是
- 預(yù)格式文本。
- 它保留了 空格
- 和換行。
- </pre>
顯示效果
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- 這是
- 預(yù)格式文本。
- 它保留了 空格
- 和換行。
方法二：我們可以用空格實(shí)體符 代替空格，用換行標(biāo)簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果，但是對(duì)搜索引擎不是最友好的方式，因?yàn)?amp;nbsp;和<br/>在HTML中都是沒(méi)有語(yǔ)義的。所以建議盡量少用。另外需要注意的是， 必須小寫(xiě)，而且最后面的分號(hào)是不能省略的。
方法三：（適合空格）使用全角空格
全角空格被解釋為漢字，所以不會(huì)被被解釋為HTML分隔符，可以按照實(shí)際的空格數(shù)顯示。
問(wèn)題：怎么使用全角輸入法？
以搜狗輸入法為例，我們通常使用的是半角輸入，其狀態(tài)欄中有個(gè)月亮的標(biāo)志，就說(shuō)明正在使用的是半角輸入，如果是太陽(yáng)的標(biāo)志，就說(shuō)明使用的是全角輸入。全角/半角的切換可以通過(guò)點(diǎn)擊標(biāo)志，也可以通過(guò)快捷鍵 Shift+Space（空格符）切換。
半角輸入（月亮） 全角輸入（太陽(yáng)）
方法四：使用CSS樣式中字間隔屬性控制，CSS中的word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。我們知道英文中兩個(gè)單詞之間是通過(guò)空格隔開(kāi)的，所以我們視覺(jué)上可以這樣認(rèn)為，word-spacing改變了（拉長(zhǎng)或縮短）單詞之間那個(gè)空格的寬度。
方法五：使用CSS樣式中的white-space 屬性，這個(gè)屬性聲明如何處理元素內(nèi)的空白符。
| 值 |
描述 |
| normal |
默認(rèn)。空白會(huì)被瀏覽器忽略。 |
| pre |
空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。 |
| nowrap |
文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。 |
| pre-wrap |
保留空白符序列，但是正常地進(jìn)行換行。 |
| pre-line |
合并空白符序列，但是保留換行符。 |
white-space:normal;就是正常，和不設(shè)置一樣，連續(xù)空格和空行都只會(huì)顯示一個(gè)空格。
white-space:nowrap;不換行是什么意思呢？正常情況下，當(dāng)我們的文本超出了文本域，文本就會(huì)自動(dòng)折行，這個(gè)設(shè)置就是說(shuō)不自動(dòng)折行了，而是碰到換行標(biāo)簽<br />才換
white-space:pre;和方法一相同，將文本原樣輸出顯示。當(dāng)文本超出文本域時(shí)，不換行，會(huì)產(chǎn)生滾動(dòng)條。
white-space:pre-wrap;保留空格和空行，但當(dāng)文本超出文本域時(shí)，會(huì)自動(dòng)換行。
white-space:pre-line;連續(xù)的空格會(huì)顯示為一個(gè)空格，但保留連續(xù)的空行。
以上就是小編為大家?guī)?lái)的淺談HTML代碼中的空格和空行全部?jī)?nèi)容了，希望大家多多支持腳本之家~
原文地址：http://www.cnblogs.com/web-HCJ/p/4543093.html
