使用 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>
廣告
資料結構
網路
RDBMS
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP