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

CSSのword-spaceingのサンプルです。

目次

サンプル word-spaceingプロパティ
  標準の間隔
  間隔として5pxを指定
  間隔として20pxを指定

word-spaceingプロパティ

word-spaceing : 値

word-spaceingプロパティは、単語の間隔を指定します。

説明
数値 + 単位 指定した単位で設定します。
normal 通常の間隔にします。(初期値)
値を継承する

単語の間隔を指定するサンプルです。

標準の間隔

<style>
  .p1 {
    word-spacing: normal; /* 標準の間隔 */
    border: 1px solid #000;
    width: 300px;
    height: 30px;
    background: LightCyan;
  }
</style>
<p class="p1">単語 の 間隔 normal です</p>
<p class="p1">単語の間隔です</p>

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

 

間隔として5pxを指定

<style>
  .p1 {
    word-spacing: 5px; /* 間隔5pxを指定 */
    border: 1px solid #000;
    width: 300px;
    height: 30px;
    background: LightCyan;
  }
</style>
<p class="p1">単語 の 間隔 5px です</p>
<p class="p1">単語の間隔です</p>

間隔として5pxを指定しています。

 

間隔として20pxを指定

<style>
  .p1 {
    word-spacing: 20px; /* 間隔20pxを指定 */
    border: 1px solid #000;
    width: 300px;
    height: 30px;
    background: LightCyan;
  }
</style>
<p class="p1">単語 の 間隔 20px です</p>
<p class="p1">単語の間隔です</p>

間隔として20pxを指定しています。

関連の記事

CSS letter-spacing 文字の間隔を指定する
[CSS] overflow-wrap/word-wrap 単語が表示域超過
CSS overflow はみ出し部分を表示する/しない

△上に戻る