- 1. 概要
- 2. 書式
- 3. 書いてみる
1. 概要
モニタの解像度は、どんどん高くなっていきます。表示内容を１画面内に収めるのに対する苦労は、以前より減ってはきております（2019年8月26日）。
とは言っても、表を書いたりするとき、他の行とのバランスで、１列内に表示するものがはみ出ることがあります。
一番多いのはボタンの文字列で、長々とした文字列をボタンに配置するのは見栄えがよろしくない。
内容によっては、末尾を「...」で省略する方が見栄えがいいことがあります。
これはそういう表示方法に関して。
「...」以外のものも、ボックス形式で表示する文字列がはみ出る場合の表示方法です。
詳細は、「overflow - CSS: カスケーディングスタイルシート | MDN」をご参照ください。
2. 書式
overflow: visible; 見せる
overflow: hidden; 隠す
overflow: scroll; スクロール
overflow: auto; 自動
3. 書いてみる
書いてみるのが一番。
<div style="border: 1px solid black; width: 5em; height: 2em; margin-left: 2em; overflow: ;">あいうえおかきくけこさしすせそ</div>
「overflow」の箇所は、上から順に、「visible」「hidden」「scroll」「auto」と書くと、以下のような表示になります。
あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ
ブラウザによって、意図通りの動きをしないかもしれません。
「Vivaldi 2.7.1628.30 (Stable channel) (64-bit)」では、下記のように表示されました。
実は、これ、大きくなった <table></table> を、小さくするのに使用するつもりでいたのですが、<td></td> には、適用できないようです。
<td></td> 内には、<div></div> 等を記述して、そのなかでスタイルを適用するしかないようです。
|
