JavaScript 字串中的非換行空格

Tahseen Tauseef 2023年1月30日 2022年5月10日
  1. 什麼是 HTML 中的字元實體
  2. 在 HTML 中使用 &nbsp 新增不間斷空格
  3. 在 HTML 中使用 &ensp&emsp 新增多個空格
  4. 為什麼我們需要在 HTML 程式碼中使用非中斷空間
JavaScript 字串中的非換行空格

在 HTML 中,我們不能在帶有空格的空格字元之後建立額外的空格。因此,如果我們想在 HTML 程式碼中新增 10 個空格並嘗試用空格鍵新增它們,我們將在瀏覽器中只看到一個空格。

此外,一個或多個應該放在一起的單詞可能會換行。本文展示瞭如何在程式碼中建立任意數量的空格,並在 HTML 中使用 &nbsp 字元實體新增不間斷空格。

什麼是 HTML 中的字元實體

瀏覽器中使用字元實體來顯示各種字元。

例如,HTML 中的小於號 (<) 和大於號 (>) 是為標籤保留的。如果你在程式碼中使用它們,HTML 可能會將它們誤解為開始和結束標記。

如果要將它們用作大於小於,則必須使用它們各自的字元實體(<>)。之後,你可以在瀏覽器中安全地檢視它們。

在 HTML 中使用 &nbsp 新增不間斷空格

因為無論你的程式碼中有多少個字元,瀏覽器都只會顯示一個空格,因此 HTML 具有 &nbsp 字元實體。 &nbsp 字元實體用於 HTML。

它可以顯示許多空白。

如果你不使用 &nbsp 字元實體,下面是你的程式碼的外觀。

<div>
    <p>
      Today is 3rd March 2022, the time right now is 2:15 pm and the temperature is 24 degree celsius.
    </p>
</div>

為了使 HTML 更清晰、更易於閱讀,就像我們試圖展示的那樣,我們包含了一些 CSS。

body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     max-width: 800px;
     margin: 0 auto;
     font-size: 2rem;
}

span {
     background-color: #2ecc71;
}

未使用 nbsp

我們在下面的 HTML 程式碼中使用了 &nbsp 字元元素來建立大量的空格。

<div>
   <p>
     Today is &nbsp; &nbsp; &nbsp; 3rd March 2022, the time right now is 2:15 pm and the temperature is &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 24 degree celsius.
   </p>
</div>

使用 nbsp 在 HTML 中新增不間斷空格

Today is3rd March 之間有三個空格,temperature is24 degree celsius 之間有五個空格。我們分別插入了 3 個和 5 個 &nbsp 字元。

如果沒有 &nbsp 字元實體,這將是不可能的。

在 HTML 中使用 &ensp&emsp 新增多個空格

如果你想在你的程式碼中有十個空格怎麼辦?寫十遍&nbsp 既多餘又乏味。

相反,兩個不間斷空格的&ensp 字元實體和四個不間斷空格的&emsp 由 HTML 提供。

<div>
   <p>
    Today is &ensp; &nbsp; 3rd March 2022, the time right now is 2:15 pm and the temperature is &emsp; &nbsp; 24 degree celsius.
   </p>
</div>

在上面的程式碼中,我們使用 &ensp;Today is3rd March 之間插入了三個空格一次(2 個空格)和 &nbsp 一次(1 個空格)。然後我們使用了 1 個&emsp(4 個空格)和 1 個&nbsp(1 個空格)實體,介於 temperature is24 degree celsius 之間。

結果,第二個示例中的空格數保持不變。

使用 ensp 和 emsp 在 HTML 中新增多個空格

為什麼我們需要在 HTML 程式碼中使用非中斷空間

首字母、單位、日期、金額和其他應該放在一起的單詞可能會被 HTML 拆分到另一行。

&nbsp 字元實體可以防止這種情況。在這些單詞之間使用 &nbsp 字元會在它們之間建立空格並防止任何單詞換行。

 <div>
    <p>
         Today is &nbsp; 3rd March 2022, the time right now is 2:15 pm and the temperature is 24 &nbsp; degree celsius.
    </p>
</div>

為了更清楚並解釋我們試圖展示的內容,我們新增了一些 CSS。

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    max-width: 800px;
    margin: 0 auto;
    font-size: 2rem;
}

span {
    background-color: #2ecc71;
}

結果如下所示。

單詞換行

如你所見,24-degree celsius 被斷開了,這並不理想,因為它可能會使讀者感到困惑。

字元實體&nbsp 將這兩個詞繫結在一起。

<div>
    <p>
     Today is &nbsp; 3rd March 2022, the time right now is 2:15 pm and the temperature is 				24&nbsp;degree celsius.
    </p>
</div>

使用 nbsp 將單詞繫結在一起

你已經瞭解瞭如何使用 &nbsp&ensp&emsp 字元實體在瀏覽器中顯示空格。不幸的是,僅使用空格鍵是不夠的。

你還可以使用 &nbsp 字元實體來防止應該保持在一起的單詞在某些地方進入下一行。

相關文章 - JavaScript String