【word-spacing】単語の間隔を変更する

word-spacingプロパティでは、単語と単語の間隔を変更することができます。

値は標準の間隔に対しての増加分を指定して下さい。またマイナスの値も指定することができ、間隔を広げる以外にも縮める事も可能です。 ただしtext-alignプロパティで「justify」を設定している場合は、word-spacingで指定した値が思うように反映されない場合もあります。

また単語と単語の間隔はスペース(空白)で判断されます。 ですのアルファベット以外に日本語のテキストでも、半角、または全角のスペースがあれば指定した値の間隔で表示されるようになります。

書式

  • word-spacing : ……… 単語の間隔を変更する

★:normal、数値+単位、inherit

normal
標準の単語間隔にする(初期値)
実数値+単位
数値にpxやemなどの単位を付けて、標準の単語間隔に加算する分を指定します。例えば「5px」と指定した場合は「標準の単語間隔+5px」が実際に表示されるサイズとなります。またマイナスの値を指定する事も可能で、「0」を指定した場合は「normal」と同様の表示となります。

使用した時の例

.sample1 {word-spacing: normal;}
.sample2 {word-spacing: 15px;}
.sample3 {word-spacing: -5px;}
<div class="sample1">word spacing (間隔 normal)</div>
<div class="sample2">word spacing (間隔 15px)</div>
<div class="sample3">word spacing (間隔 -5px)</div>

ブラウザ上の表示例

word spacing (間隔 normal)
word spacing (間隔 15px)
word spacing (間隔 -5px)

対応ブラウザなどのデータ

初期値 normal 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / text
対応ブラウザ Internet Explorer6~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~