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

300×100pxのHTMLボックスの中に沢山の文字を書いてみました。当然ボックスから溢れ出て文字が表示されてしまいます。

今回はこのような問題をスクロールを設置する事で回避してみたいと思います。
まずはHTMにどのような記述をすれば良いのかを理解しましょう。この状態でのHTMLはこうなります。style属性に、overflow(溢れた文字を)visible(表示)という指示がされています。

次に、属性の、overflowプロパティーを『visible』から『hidden』(非表示)と指定すると、ボックスからあふれ出す文字が表示されなくなります。

しかし、これだと溢れ出た文字を見る事ができません。そこでスクロールバーを設置してみたいと思います。『overflow』の後を、:scroll; width:300px; height:100pxとします。

これでwidth:300px; height:100pxのボックスに対してスクロールバーが設置されます。

表示はこのようになります。ボックス右側にスクロールバーが表示されましたね。

しかしこの設定だとボックス内に収まる文字数でもスクロールバーが表示されてしまいます。あくまで文字があふれてしまった場合だけスクロールバーを表示させるには、overflow:scrollをoverflow:autoにします。