letter-spacing, white-space, word-spacing, word-wrap

letter-spacing | white-space | word-spacing | word-wrap

letter-spacing

設定字母的間距，可設為：

1. normal：使用字型原有的字距。允許展現程式改變字距，以達到文字對齊之目的。此為預設值。
2. 長度：設定長度，加在原有字型的字距。可用負值。不允許展現程式再改變字距。
3. inherit：繼承父元件的特徵值。

<span style='letter-spacing: -8px' > 子曰：學而時習之，不亦說乎？</span><br /> <span>子曰：有朋自遠方來，不亦樂乎？</span><br /> <span style='letter-spacing: 8px' > 子曰：人不知而不慍，不亦君子乎？</span>

word-spacing

設定詞的間距。這對連續的中文沒有效果，要加上空白才會有效果。可設為：

1. normal：使用字型或展現程式內定的詞距。此為預設值。
2. 長度：設定長度，加在原有字型的詞距。可用負值。
3. inherit：繼承父元件的特徵值。

<span style='word-spacing: -18px' > The space between two words.文字的 間距。</span><br /> <span>The space between two words.文字的 間距。</span><br /> <span style='word-spacing: 32px' > The space between two words.文字的 間距。</span>

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {width:200px; height:150px; border:solid 1px red; letter-spacing:20px; word-spacing:40px; } .hvr:hover {letter-spacing:2px;} .hvr:active {word-spacing:2px;} </style> <div class=hvr> 射擊遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲. </div>

javascript 應用。可以用 style 物件 的特徵 letterSpacing, wordSpacing 作動態變化。 <span id='test' style='background:#339 '> letter spacing word spacing</span> <script type='text/javascript'> function toggleCSS(id, pty, v1, v2, ms) { var os=document.getElementById(id).style; os[pty]= (os[pty] == v1 ) ? v2 : v1; setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'","'+ms+'")', ms); } toggleCSS("test", "letterSpacing", "2px", "10px", 1000); toggleCSS("test", "wordSpacing", "4px", "20px", 1500); </script>