CSS word-spaceing 英文の単語の間隔を指定する

目次

サンプル word-spaceing
  単語の間隔が標準
  単語の間隔が5px
  単語の間隔が20px
  単語の間隔を継承する

word-spaceingとは

word-spaceingは、単語の間隔を指定します。

word-spaceing : 値

値は、数値 + 単位を指定します。

通常の単語の間隔に、指定した数値+単位のスペースが追加されます。

継承します。

 

単語の間隔が標準

<style>
  .p1 {
    word-spacing: normal;
  }
</style>
<p class="p1">This is a pen.</p>
<p class="p1">Thisisapen.</p>

7行目は、単語間にスペースがない場合です。間隔はあきません。

 

単語の間隔が5px

<style>
  .p1 {
    word-spacing: 5px;
  }
</style>
<p class="p1">This is a pen.</p>
<p class="p1">Thisisapen.</p>

 

単語の間隔が20px

<style>
  .p1 {
    word-spacing: 20px;
  }
</style>
<p class="p1">This is a pen.</p>
<p class="p1">Thisisapen.</p>

 

単語の間隔を継承する

<style>
  .div1 {
    word-spacing: 20px;
  }
</style>
<div class="div1">
  <p>This is a pen.</p>
  <p>This is a pen.</p>
  <p>This is a pen.</p>
</div>

7~9行目のword-spacingは、20pxになります。

関連の記事

CSS letter-spacing 文字の間隔を指定する
CSS overflow-wrap 単語が表示領域を超えた時の改行

△上に戻る