ホーム >>> HTML整理ノート

word-spacing 単語間隔を設定

単語間隔のスペースを区切りとみなし、その単語間隔を設定

(値）
　＜normal＞･･･(初期値)プラウザ標準の単語間隔
　＜数値 + 単位＞･･･通常間隔への増分値を指定

●Script ･･･wordSpacingプロパティ
　　書式 ･･･ Object.style.wordSpacing = 設定値;

Sample

CSS Word Spacing style 日本語　間隔　にも　対応

間隔を10pxずつ増減--→ 　　現在のword-spacing間隔は:10px

CSS1 Word Spacing Style
日本語の 間隔も こ の よ う に

（文字間のスペースの広さを増減しているようだ。マイナス指定すると文字がダブったり、入れ替わっていく）

Sample Source......................................................................>>>

<style type="text/css"><!--  
　div#dv1,div#dv2 {width:95%;border:1px solid green;color:navy;
       font:14px;text-align:center;word-spacing:10px;       
        overflow:hidden;white-space:nowrap;}
--></style>
<script language="JavaScript"><!--
  s = 10;  //word-spacingの初期値
  function Space(flg){   
        if(flg)s = s + 10;  else s = s - 10;  
                dv1.style.wordSpacing = s +"px";  
                dv2.style.wordSpacing = s +"px";  
                info.innerText = s;}//-->
</script>
</head>

<body>
<p style="word-spacing:5mm">CSS Word Spacing style 日本語　間隔　にも　対応</p>
 
<p>間隔を10pxずつ増減--→
  <button onclick="Space(true)">＋</button> 
  <button onclick="Space(false)">ー</button>
　現在のword-spacing間隔は:<span id="info" style="color:red;font:18px">10</span>px</p>
<div id="dv1">CSS1 Word Spacing Style</div>
<div id="dv2">日本語の 間隔も こ の よ う に</div>