HTML代碼中的空格和空行


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

例子1:(文本內容中的連續空格

代碼

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

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

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

 

例子2:(代碼之間的連續空格)

代碼

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

顯示效果:兩個span元素之間連續的空格,顯示出來即"簽"與“和”之間的空格,只有一個空格。

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

 

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

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

 

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

例子3:(文本內容中的空行)

代碼

<p>這段文本中,輸入連續的空行





大概輸入了五行。</p>

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

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

 

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

<span>span是一個行內標簽</span>





<span>和前面的span元素之間隔了很多空行</span>

 

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

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

 

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

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

<pre>
這是
預格式文本。
它保留了      空格
和換行。
</pre>

 顯示效果

這是
預格式文本。
它保留了      空格
和換行。

 

方法二:我們可以用空格實體符&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;連續的空格會顯示為一個空格,但保留連續的空行。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM