overflow
、text-overflow
、resize
: はみ出し/省略記号/リサイズ CSSプロパティ
このページで解説するコードの実行結果。
文字列や子要素のボックスが、親要素のボックスからはみ出す場合がある。
これを、下のように変えるのが目的。(タイトルの文字列をクリックすると、コードに移動)
HTML
& CSS
このページでは、以下のコードをデフォルトとして使用している。
<div class="parent"> sample </div> <div class="parent" lang="de"> Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. </div> <div class="parent"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel. </div>
上記結果のように、文字列が<div>
要素からはみ出している。
※ 文字列をはみ出させるには「white-space: nowrap;
」を使うこともできる。
下は、文字列ではなくボックスがはみ出した例。
.parent { margin: 2em; /* 外側の余白 */ padding: 1em; /* 内側の余白 */ width: 11em; /* 幅 */ height: 7em; /* 高さ */ border: 2px solid orange; /* 境界線 */ } .children { width: 4em; /* 幅 */ height: 3em; /* 高さ */ border: 2px solid green; /* 境界線 */ background-image: linear-gradient( yellowgreen, greenyellow ); } .child-2 { width: 14em; /* 幅 */ } .child-3 { height: 8em; /* 高さ */ } .child-4 { width: 14em; /* 幅 */ height: 8em; /* 高さ */ }
<div class="parent"> <div class="children child-1"> 子1 </div> </div> <div class="parent"> <div class="children child-2"> 子2 </div> </div> <div class="parent"> <div class="children child-3"> 子3 </div> </div> <div class="parent"> <div class="children child-4"> 子4 </div> </div>
概要
文字列や(子要素の)ボックスが(親要素の)ボックスに収まらなくて(あふれて)はみ出す場合に、どのように表示させるか(表示させないか)の設定について。
具体的には下表のプロパティについて解説する。
CSSプロパティ | 目的 | デフォルト値 | 他の設定値 |
---|---|---|---|
overflow | はみ出す場合の処理 | visible | auto scroll hidden |
text-overflow | 省略記号 | clip | ellipsis |
resize | リサイズ | none | both horizontal vertical |
overflow
: はみ出す場合の処理
visible
: はみ出したまま
overflow: visible;
を指定する。
デフォルト値なので無指定の場合と同じように、文字列がはみ出す。
.parent { overflow: visible; }
ボックスの場合も同じ。
auto
: 自動
overflow: auto;
を指定すると「はみ出す場合のみ」スクロール可能になる。
.parent { overflow: auto; }
一番上のsample
の場合、はみ出さないのでそのまま。
二番目は「横にスクロール可能」になり、三番目は「縦にスクロール可能」になる。
ボックスの場合も同じ。
scroll
: スクロール
overflow: scroll;
を指定すると(必要が無くても)常にスクロールバーが表示される。
.parent { overflow: scroll; }
ボックスの場合も同じ。
hidden
: 非表示
overflow: hidden;
を指定すると、はみ出る部分は見えなくなる。
.parent { overflow: hidden; }
ボックスの場合も同じ。
なお、hidden
の場合は、下で説明する resize
を指定しておけば隠れた部分を見れるようにできる。
text-overflow
: 省略記号
overflow: hidden;
を使った場合、はみ出る部分がそのまま切られるので、省略されているか否か分かりにくい。
よって、省略されていることを示す記号(…
)を、省略される直前に表示することができる。
設定値 | 省略される場合 | デフォルト |
---|---|---|
clip | そのまま切れる | ○ |
ellipsis | 最後に「… 」が表示される。 |
デフォルト(clip
)の場合。
.parent { overflow: hidden; }
ellipsis
を設定した場合。
.parent { overflow: hidden; text-overflow: ellipsis; }
auto
やscroll
の場合.parent { overflow: auto; text-overflow: ellipsis; }
.parent { overflow: scroll; text-overflow: ellipsis; }
resize
: リサイズ
はみ出す場合、リサイズ(大きさを変更)するような設定ができる。
ただし、overflow
がvisible
の場合は無効になるので、auto
/scroll
/hidden
のいずれかを設定しておく。
設定値 | リサイズ可能な方向 | デフォルト |
---|---|---|
none | 不可 | ○ |
both | 両方向(上下左右) | |
horizontal | 水平方向 (左右)のみ | |
vertical | 垂直方向 (上下)のみ |
デフォルトはnone
であり、リサイズできない。(ここまでの実行結果はリサイズできない)
both
: 両方向(上下左右)リサイズ可能
オレンジ色のボックスの右下の角にあるマークをドラッグすると、大きさを変更できるようになる。
変更できる方向は 両方向(上下左右) 。以下は overflow: auto
の場合。
.parent { overflow: auto; resize: both; }
scroll
とhidden
の場合は以下。
scroll
の場合.parent { overflow: scroll; resize: both; }
.parent { overflow: hidden; resize: both; }
horizontal
: 水平方向(左右)のみリサイズ可能
変更できる方向は水平方向(左右)のみ 。以下は overflow: auto
の場合。
.parent { overflow: auto; resize: horizontal; }
scroll
とhidden
の場合は以下。
scroll
の場合.parent { overflow: scroll; resize: horizontal; }
.parent { overflow: hidden; resize: horizontal; }
vertical
: 垂直方向(上下)のみリサイズ可能
変更できる方向は垂直方向(上下)のみ 。以下は overflow: auto
の場合。
.parent { overflow: auto; resize: vertical; }
scroll
とhidden
の場合は以下。
scroll
の場合.parent { overflow: scroll; resize: vertical; }
.parent { overflow: hidden; resize: vertical; }
リサイズの上限と下限
下記コードの実行結果では縦横15em
の正方形ができる。
この正方形はリサイズ可能であるが、縦横とも10em
~20em
の範囲のみ。
.sample { overflow: hidden; resize: both; width: 15em; height: 15em; max-width: 20em; max-height: 20em; min-width: 10em; min-height: 10em; border: 2px solid red; background-image: linear-gradient( to top left, #eee 10%, red ); }
<div class="sample"> リサイズ可能(10em ~ 20em) </div>
<textarea>
テキストエリア
メジャーなブラウザでは、テキストエリア要素( <textarea>
)はデフォルトで垂直方向のリサイズが可能である。(=resize: vertical
が指定されている状態)
<textarea class="sample"> テキストエリア </textarea>
このリサイズを禁止したい場合、resize: none
を指定する。
.sample { resize: none; }
なお、両方向のリサイズを可能にするにはboth
にする。
.sample { resize: both; }
Emmet : ov
tov
rsz
記述 | Visual Studio Code |
---|---|
ov | overflow: hidden; |
ova | overflow: auto; |
tov | text-overflow: ellipsis; |
tovc | text-overflow: clip; |
rs | resize: none; |
rsb | resize: both; |
rsh | resize: horizontal; |
rsv | resize: vertical; |