使用 CSS wordspacing 屬性管理單詞之間的間距


透過定義 CSS word-spacing 屬性,我們可以設定單詞之間的空白量。單詞之間的空白可以增加或減少。它可以設定在以下 CSS 單位中:px、pt、em、cm 等。讓我們看看語法。

語法

以下是 word-spacing 屬性的語法 −

word-spacing: value;

值可以是 −

  • normal − 單詞之間的正常間距

  • length − 以 pt、px、cm 等設定的單詞間距,

以下示例說明了 CSS word-spacing 屬性。

釐米單位的單詞間距

單詞間距可以透過 word-spacing 屬性設定在 px、pt、cm、em 等單位中 −

div {
   margin: 2%;
   padding: 2%;
   background-color: mediumorchid;
   color: ivory;
   word-spacing: 2.2cm;
}

示例

讓我們看一個示例。我們還使用 word-spacing 屬性的 normal 值來設定正常單詞間距 −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin: 2%;
         padding: 2%;
         background-color: mediumorchid;
         color: ivory;
         word-spacing: 2.2cm;
      }
      div:last-of-type {
         word-spacing: normal;
      }
   </style>
</head>
<body>
   <div>I Don't Care! I Love It!</div>
   <div>I Don't Care! I Love It!</div>
</body>
</html>

畫素單位的單詞間距

單詞間距可以透過 word-spacing 屬性設定在 px、pt、cm、em 等單位中。我們有以 px(畫素)單位表示的單詞間距 −

article {
   margin: 2%;
   padding: 2%;
   background-color: azure;
   word-spacing: 20px;
}

示例

讓我們看一個示例。我們還使用 word-spacing 屬性的 normal 值來設定正常單詞間距 −

<!DOCTYPE html>
<html>
<head>
   <style>
      article {
         margin: 2%;
         padding: 2%;
         background-color: azure;
         word-spacing: 20px;
      }
      article:last-of-type {
         word-spacing: normal;
      }
   </style>
</head>
<body>
   <article>tldr; this article doesn;t mean anything</article>
   <article>0123456789 is not a phone number</article>
</body>
</html>

更新於: 2023 年 12 月 26 日

184 次檢視

開啟你的職業生涯

完成課程,獲得認證

開始學習
廣告