HTML - CSS - overflow はみ出る文字列の表示形式

 クラウディア
1. 概要
2. 書式
3. 書いてみる

1. 概要

 モニタの解像度は、どんどん高くなっていきます。表示内容を1画面内に収めるのに対する苦労は、以前より減ってはきております(2019年8月26日)。  とは言っても、表を書いたりするとき、他の行とのバランスで、1列内に表示するものがはみ出ることがあります。  一番多いのはボタンの文字列で、長々とした文字列をボタンに配置するのは見栄えがよろしくない。  内容によっては、末尾を「...」で省略する方が見栄えがいいことがあります。  これはそういう表示方法に関して。  「...」以外のものも、ボックス形式で表示する文字列がはみ出る場合の表示方法です。  詳細は、「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)」では、下記のように表示されました。
「HTML CSS」-「overflow」表示例


 実は、これ、大きくなった <table></table> を、小さくするのに使用するつもりでいたのですが、<td></td> には、適用できないようです。
 <td></td> 内には、<div></div> 等を記述して、そのなかでスタイルを適用するしかないようです。



 
 
カウンタバックグラウンド