オーバーフロー(overflow)解説
ボックス内に文章を書いてみます。
あふれ出した文字がオマエ壊しそうで・・・。
幅100px 高さはautoにしたボックスに文字を入れています(高さの指定を行わない場合と同じ)。
右端に達した文字は自動的に改行。
テキストの最終文字に合わせてボックスも閉じます。
width: 100px;
height: auto;
overflow: auto;
ボックス内に文章を書いてみます。
あふれ出した文字がオマエ壊しそうで・・・。
幅100px 高さも100pxに固定したボックスに文字を入れています。
オーバーフローは hidden なのでボックスの大きさを優先、
あふれ出した文字は読めない仕組みです。
width: 100px;
height: 100px;
overflow: hidden;
ボックス内に文章を書いてみます。
あふれ出した文字がオマエ壊しそうで・・・。
幅100px 高さも100pxに固定したボックスに文字を入れています。
オーバーフローは visible (デフォルト値) なんですが、
本来なら収まりきらない文字はボックス外に突き抜けて(ハミ出して)表示される理屈です。
しかし、IE ではボックスの高さ自体が字数に合わせて変化します。
width: 100px;
height: 100px;
overflow: visible;
There is word in box.
Overfllow word break you.
You get
satisfactionnnnnn?
幅100px 高さも100pxに固定したボックスに半角英文字を入れています。
オーバーフローは auto 。
satisfaction のように文中で最も長い単語を収納できるような横幅になるようです。
英文字は単語の途中では改行しないのがルールですから。
width: 100px;
height: 100px;
overflow: auto;
ボックス内に文章を書いてみます。
あふれ出した文字がオマエ壊しそうで・・・。
幅100px 高さも100pxに固定したボックスに収まりきらない画像を入れています。
オーバーフローはタテヨコ両指定の scroll です。無意味に現れる横スクロールバーが哀しい
(文字が収まる場合でもバーを表示します)。
width: 100px;
height: 100px;
overflow: scroll;
ボックス内に文章を書いてみます。
あふれ出した文字がオマエ壊しそうで・・・。
幅100px 高さも100pxに固定したボックスに文字を入れています。
縦スクロールの擬似フレームを作るならこのようにしたら良いでしょう。
auto だとブラウザ任せになりますが、
中身があふれた場合のみスクロールバーを表示させるハズです。
width: 100px;
height: 100px;
overflow: auto;