Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

word-spacing

単語間の間隔を指定します。

サンプルコード

style.css

p.test { word-spacing: normal;}
p.test1 { word-spacing: 3px;}
p.test2 { word-spacing: 1em;}

指定可能な値一覧

値	概要
normal	単語間の間隔を、現在のフォントやブラウザなどで定義されている間隔で表示します。この『normal』が初期値です。
数値	単語間の間隔を数値で指定します。主に使用される単位は『px』、『em』などです。

ブラウザでの表示結果

<p style="word-spacing: normal;">ここはp要素です。『word-spacing: normal』と指定しています。this is a pen.</p>

<p style="word-spacing: 10px;">ここはp要素です。『word-spacing: 10px』と指定しています。this is a pen.</p>

<p style="word-spacing: 2em;">ここはp要素です。『word-spacing: 2em』と指定しています。this is a pen.</p>

概要

単語間の間隔を指定します。

注意点として英語などでは単語の区切りが明確に存在していますが、日本語では単語の区切りが曖昧です。このプロパティは主にテキストが英語の場合に使用されることが多いプロパティです。

よくあるミス

日本語テキストに指定しても効果が分かりにくい

『word-spacing』プロパティは単語と単語の間の間隔を調整しますが、日本語では単語の区切りが明確でないためほとんど効果が出ません。英語などのラテン文字のテキストで使用することを前提としたプロパティです。

/* 日本語テキストには効果が出にくい */
p.japanese { word-spacing: 20px; }

/* 英語テキストには明確に効果が出る */
p.english { word-spacing: 10px; }
/* "Hello World" → "Hello      World" のように単語間が広がる */

letter-spacingと混同してしまう

『word-spacing』は単語間（スペース部分）の間隔を調整しますが、文字と文字の間の間隔を調整する場合は『letter-spacing』プロパティを使います。日本語テキストの文字間隔を調整したい場合は『letter-spacing』が適しています。

/* 単語間の間隔: word-spacing */
p { word-spacing: 5px; }

/* 文字間の間隔: letter-spacing（日本語にも有効） */
p { letter-spacing: 0.1em; }

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android