| 属性名 | word-spacing |
|---|---|
| 値 | [ normal | <length> | <percentage> ]{1,3} |
| 初期値 | normal |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| メディア | Visual / Text |
| サポート | C1 / e6 / N6 / Fx1 / Ch1 / Op3.5 / Sa1 |
単語間の隙間を指定します。文字間の隙間を指定するには letter-spacing を参照してください。
| 値 | 説明 |
|---|---|
| normal | 単語間の隙間を自動調整します。(C1/e6/N6/Fx1/Ch1/Op3.5/Sa1) |
| <length> | 単語間の隙間を 1.5em や 10px のような長さの単位で指定します。(C1/e6/N6/Fx1/Ch1/Op3.5/Sa1) |
| <percentage> | 単語間の隙間を通常の空白の幅を 100% としたパーセントで指定します。まだあまりサポートされていないようです。(C3) |
隙間は 1～3個指定することができ、それぞれ、推奨値、最小値、最大値を意味します。省略時は下記の様に解釈されます。現時点ではまだあまりサポートされていないようです。
word-spacing: 20px; /* 推奨値:20px, 最小値:20px, 最大値:20px */ word-spacing: 20px 30px; /* 推奨値:20px, 最小値:20px, 最大値:30px */ word-spacing: 20px 10px 30px; /* 推奨値:20px, 最小値:10px, 最大値:30px */
.sample-normal {
word-spacing: normal;
margin: 1em;
width: 300px;
border: 1px solid #666666;
}
.sample-length {
word-spacing: 2em;
margin: 1em;
width: 300px;
border: 1px solid #666666;
}
.sample-percentage {
word-spacing: 200%;
margin: 1em;
width: 300px;
border: 1px solid #666666;
}
<h5>normal</h5> <div class="sample-normal"> We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare... </div> <h5>length(2em)</h5> <div class="sample-length"> We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare... </div> <h5>percentage(100%)</h5> <div class="sample-percentage"> We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare... </div>