首页
/
每日頭條
/
科技
/
html怎麼出現空格
html怎麼出現空格
更新时间:2024-12-05 10:15:52

例子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>

顯示效果

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

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

方法三:(适合空格)使用全角空格

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

問題:怎麼使用全角輸入法?

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

html怎麼出現空格(HTML代碼中的空格和空行)1

半角輸入(月亮)

html怎麼出現空格(HTML代碼中的空格和空行)2

全角輸入(太陽)

方法四:使用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;連續的空格會顯示為一個空格,但保留連續的空行。

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
怎樣把壓縮到最小又清晰
怎樣把壓縮到最小又清晰
大家在上傳自己創作的視頻到社交媒體平台時,是否也曾遇到過因為視頻文件太大而導緻上傳失敗的情況呢?很多時候,我們都會需要對較大的視頻文件進行壓縮,以便上傳到社交平台上,同時,壓縮視頻也能夠幫助我們減小儲存空間的占用,幫助我們節省更多的内存。那...
2024-12-05
零冷水燃氣熱水器怎麼選
零冷水燃氣熱水器怎麼選
先放目錄,方便大家快速浏覽全文一、什麼是零冷水燃熱二、零冷水值得買嗎?三、零冷水的布局思路分享四、零冷水的實際體驗如何五、顔值與廚房的搭配六、零冷水的安裝過程七、零冷水燃熱開箱八、最後的建議·一、什麼是零冷水燃熱新房裝修,小區鄰居裝的燃氣熱...
2024-12-05
蘋果手機短信誤删能恢複嗎
蘋果手機短信誤删能恢複嗎
對于很多網友來說,手機恢複方面的知識都比較的匮乏,如果手機上有一些比較重要的短信(如借款憑證等)誤删了該怎麼怎麼辦呢?今天小編就教大家一些簡單的恢複技巧,以便在急需的時候可以解燃眉之急。方法一:通過itunes備份恢複誤删短信對于重要的短信...
2024-12-05
家長要收手機怎麼辦
家長要收手機怎麼辦
家長要收手機怎麼辦?可以和父母溝通,告訴父母你拿上手機和同學聯系,也方便學習上遇到問題,也好和同學讨論,不拿手機玩遊戲,讓家長相信你,你也必須做到,就應該沒有問題,我來為大家講解一下關于家長要收手機怎麼辦?跟着小編一起來看一看吧!家長要收手...
2024-12-05
pdf文件加密了怎麼解密
pdf文件加密了怎麼解密
PDF文件的一大優點是可以設置文件的安全性,不僅可以通過證書加密的形式加密文件,還可以通過pdfFactory來設置密碼的形式加密文件。我們可以通過兩種方式開啟“PDF加密”來為文檔設置密碼,禁止他人複制、打印、改變PDF文件内容等。分别是...
2024-12-05
Copyright 2023-2024 - www.tftnews.com All Rights Reserved