使用 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>
廣告