[CSS] 単語と単語の間隔を指定するword-spacingプロパティ

一見すると「letter-spacing」プロパティに似ているように見えますがは、word-spacingは単語と単語の間隔を指定する際に使用します。

値は数値付きの単位を指定します。負の値を指定して単語同士の間隔を詰めることができまが、マイナス値を大きくすると文字が重なったりします。

パーセント(%)の値は適用されません。

セレクタ{word-spacing: 値;}
normal	初期値として通常の単語間隔で表示する(初期値)
数値付き	単語の間隔を数値で表示する。単位：px、em、exなど

word-spacing :<length>

 <style>
 p {
   word-spacing : 2.5em; } 
 p {
   word-spacing : 20px; }
 p {
   word-spacing : .3px; }
 p {
   word-spacing : -10px; }
  </style>

How to Stop Overthinking

word-spacing :Keyword

 <style>
 p {
   word-spacing : naromal; } 
 </style>

How to Stop Overthinking

word-spacing : Global values

 <style>
 p {
   word-spacing : inherit; } 
 p {
   word-spacing : initial; } 
 p {
   word-spacing : unset; } 
 </style>

How to Stop Overthinking

日本語にword-spacing?

日本語のように単語と単語の間に区切りがない言語の場合は、任意の場所に半角スペースを追加しなければ単語として認識しません。

日本語のようにスペースの区切りが不要な言語には適していません。無理やり半角スペースを入れて「word-spacing:2em;」を指定してみました。↓

 <style>
    p.jpn { word-spacing : 2em; } 
 </style>
 
 <body>
    <p class="jpn">単語と 単語の 間隔 を 指定する</p>
  </body>

単語と単語の間隔を指定する