word-spacing CSS3

word-spacing は、単語と単語との間隔を指定する時に使います。 単語間隔のアルゴリズムは UA に依存します。 word-spacing は両端揃えの影響を受けることもあります。(text-align プロパティ参照) 負の値は制限があるかもしれません。

名前:word-spacing
: normal | <length-percentage>
初期値:normal
適用対象:全ての要素
継承:する
パーセンテージ:影響されたグリフの幅を参照
メディア:visual(視覚的)
計算値:<length>は絶対、他は指定通り
正規順序:n/a
アニメーション:長さ、パーセンテージまたは calc 式

Value(値)

normal
初期値 標準の単語間隔
<length>
数値+単位で指定。 デフォルトの単語間隔に加えて単語間隔を指定する。
<percentage>
数値+%で指定。影響される文字のアドバンス幅(グリフの開始位置から次のグリフの開始位置までの距離)のパーセンテージとして追加の間隔を指定する。

英語の各スペースの幅を2倍に、アラビア語の単語間の全てのスペースをゼロ幅にします。

:lang(ar) { word-spacing: -100%; }
:lang(en) { word-spacing: 100%; }

単語間隔に "0"グリフの幅の半分を追加します。参照: [CSS-VALUES-3]

span { word-spacing: 0.5ch; }

<表示>

英語 normalアラビア語 normal
apple peach banana strawberry تفاحة خوخ موز الفراولة
英語 { word-spacing: 100%; }アラビア語 { word-spacing: -100%; }
apple peach banana strawberry تفاحة خوخ موز الفراولة
span { word-spacing: 0.5ch; }
apple peach banana strawberry

word-spacing CSS2.2

名前:word-spacing
: normal | <length> | inherit
初期値:normal
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual(視覚的)
計算値:normalの値は0、その他は絶対的長さ

Value(値)

normal
初期値 標準の単語間隔
<length>
数値+単位で指定。 単語間のデフォルトの間隔に加えて単語間の間隔を指定する。負の値は制限があるかもしれない。
inherit
親要素の値を継承する

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { word-spacing: 1px; }
   p.test2 { word-spacing: 1em; }
   p.test3 { word-spacing: 1ex; }
   p.test4 { word-spacing: 1pt; }
   p.test5 { word-spacing: 1mm; }
   p.test6 { word-spacing: 1cm; }
   p.test7 { word-spacing: 1in; }
   p.test8 { word-spacing: 1pc; }
  </style>
 </head>
 <body>
   <p class="test1">PX PX PX</p>
   <p class="test2">EM EM EM</p>
   <p class="test3">EX EX EX</p>
   <p class="test4">PT PT PT</p>
   <p class="test5">MM MM MM</p>
   <p class="test6">CM CM CM</p>
   <p class="test7">IN IN IN</p>
   <p class="test8">PC PC PC</p>
 </body>
</html>

display

PX PX PX

EM EM EM

EX EX EX

PT PT PT

MM MM MM

CM CM CM

IN IN IN

PC PC PC

上に戻る