2008/11/13

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>

  • 執行結果:

    The space between two words.文字的 間距。
    The space between two words.文字的 間距。
    The space between two words.文字的 間距。

: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>

  • 執行結果:

    letter spacing word spacing