Freeway 長過ぎる文字にスクロールバーを設置 その2

前回overflowを指定する方法を記述したが今回は、縦軸と、横軸を別々で指定する方法です。方法はとても簡単で、

横方向　overflow-x

縦方向　overflow-y

で指示するだけ。例えばoverflow-xを『hidden』とし、overflow-yを『scroll』とすれば縦方向だけにスクロールバーが表示される。

さらにoverflowプロパティーを『hidden』と指定してボックスに収まらない文字が有る場合に省略符号『......』を表示する事もできます。ただし、横方向に文字が収まらない場合だけに有効です。

方法はoverflow :hiddenとし、さらにwhite-space :nowrapを加えることであふれた文字が改行されなくなります。

さらに、text-overflow:ellipsisを加えるとあふれた文字が『.....』置き換わります。しかしtext-overflowはIE6以上でしか対応していません。したがってsafariでは-webkit-text-overflow

Operaでは-o-text-overflowと記述します。

このようになります。

サンプルHTMLソース

<div id="PageDiv" style="position:relative; min-height:100%; margin:auto; width:980px">

<div style="position:absolute; left:39px; top:75px; height:100px; width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -o-text-overflow:ellpisis " >

文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

</div>

</div>