overflow 、 text-overflow 、 resize : はみ出し／省略記号／リサイズ CSSプロパティ
概要へ移動 全ての内容を開く 閉じるこのページで解説するコードの実行結果。
文字列や子要素のボックスが、親要素のボックスからはみ出す場合がある。
文字列 sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel. ボックス 子1 子2 子3 子4これを、下のように変えるのが目的。（タイトルの文字列をクリックすると、コードに移動）
自動 sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel. スクロール sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel. 非表示 sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel. 省略記号 sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel. 自動 子1 子2 子3 子4 スクロール 子1 子2 子3 子4 非表示 子1 子2 子3 子4 リサイズ可能 子1 子2 子3 子4 上下限 リサイズ可能（10em ～ 20em） デフォルト HTML & CSSこのページでは、以下のコードをデフォルトとして使用している。
CSS : デフォルトCSS .parent { overflow-wrap: normal; margin: 2em; /* 外側の余白 */ padding: 1em; /* 内側の余白 */ width: 11em; /* 幅 */ height: 6em; /* 高さ */ border: 2px solid orange; /* 境界線 */ color: red; } HTML : 適用するHTML <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> 実行結果 sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel.上記結果のように、文字列が<div>要素からはみ出している。
※ 文字列をはみ出させるには「white-space: nowrap; 」を使うこともできる。
下は、文字列ではなくボックスがはみ出した例。
CSS : デフォルトCSS .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; /* 高さ */ } HTML : 適用するHTML <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> 実行結果 子1 子2 子3 子4概要
文字列や（子要素の）ボックスが（親要素の）ボックスに収まらなくて（あふれて）はみ出す場合に、どのように表示させるか（表示させないか）の設定について。
具体的には下表のプロパティについて解説する。
CSSプロパティ目的デフォルト値他の設定値 overflowはみ出す場合の処理visibleauto scroll hidden text-overflow省略記号clipellipsis resizeリサイズnoneboth horizontal verticaloverflow : はみ出す場合の処理
（表） overflowの設定値設定値はみ出す場合デフォルト visibleはみ出したまま○ auto（必要な場合）スクロールバーが表示される scroll（常に）スクロールバーが表示される hidden非表示（見えなくなる） visible : はみ出したままoverflow: visible;を指定する。
デフォルト値なので無指定の場合と同じように、文字列がはみ出す。
CSS : visible .parent { overflow: visible; } 文字列の場合 sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel.ボックスの場合も同じ。
ボックスの場合 子1 子2 子3 子4 auto : 自動overflow: auto;を指定すると「はみ出す場合のみ」スクロール可能になる。
CSS : auto .parent { overflow: auto; } 文字列の場合 sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel.一番上のsampleの場合、はみ出さないのでそのまま。
二番目は「横にスクロール可能」になり、三番目は「縦にスクロール可能」になる。
ボックスの場合も同じ。
ボックスの場合 子1 子2 子3 子4 scroll : スクロールoverflow: scroll;を指定すると（必要が無くても）常にスクロールバーが表示される。
CSS : scroll .parent { overflow: scroll; } 文字列の場合 sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel.ボックスの場合も同じ。
ボックスの場合 子1 子2 子3 子4 hidden : 非表示overflow: hidden;を指定すると、はみ出る部分は見えなくなる。
CSS : hidden .parent { overflow: hidden; } 文字列の場合 sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel.ボックスの場合も同じ。
ボックスの場合 子1 子2 子3 子4なお、hiddenの場合は、下で説明する resize を指定しておけば隠れた部分を見れるようにできる。
text-overflow : 省略記号
overflow: hidden; を使った場合、はみ出る部分がそのまま切られるので、省略されているか否(いな)か分かりにくい。
よって、省略されていることを示す記号（…）を、省略される直前に表示することができる。
（表） text-overflowの設定値設定値省略される場合デフォルト clipそのまま切れる○ ellipsis最後に「…」が表示される。デフォルト（clip）の場合。
CSS : hidden .parent { overflow: hidden; } clip sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel.ellipsis を設定した場合。
CSS : ellipsis .parent { overflow: hidden; text-overflow: ellipsis; } ellipsis sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel. autoやscrollの場合 CSS : auto .parent { overflow: auto; text-overflow: ellipsis; } ellipsis sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel. CSS : scroll .parent { overflow: scroll; text-overflow: ellipsis; } ellipsis sample Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vel.resize : リサイズ
はみ出す場合、リサイズ（大きさを変更）するような設定ができる。
ただし、overflowがvisibleの場合は無効になるので、auto／scroll／hiddenのいずれかを設定しておく。
（表） resizeの設定値設定値リサイズ可能な方向デフォルト none不可○ both両方向（上下左右） horizontal水平方向 （左右）のみ vertical垂直方向 （上下）のみデフォルトはnoneであり、リサイズできない。（ここまでの実行結果はリサイズできない）
both : 両方向（上下左右）リサイズ可能オレンジ色のボックスの右下の角にあるマークをドラッグすると、大きさを変更できるようになる。
変更できる方向は 両方向（上下左右） 。以下は overflow: autoの場合。
CSS : both auto .parent { overflow: auto; resize: both; } 実行結果 子1 子2 子3 子4scrollとhiddenの場合は以下。
scrollの場合 CSS : both scroll .parent { overflow: scroll; resize: both; } 実行結果 子1 子2 子3 子4 hiddenの場合 CSS : both hidden .parent { overflow: hidden; resize: both; } 実行結果 子1 子2 子3 子4 horizontal : 水平方向（左右）のみリサイズ可能変更できる方向は水平方向（左右）のみ 。以下は overflow: autoの場合。
CSS : horizontal auto .parent { overflow: auto; resize: horizontal; } 実行結果 子1 子2 子3 子4scrollとhiddenの場合は以下。
scrollの場合 CSS : horizontal scroll .parent { overflow: scroll; resize: horizontal; } 実行結果 子1 子2 子3 子4 hiddenの場合 CSS : horizontal hidden .parent { overflow: hidden; resize: horizontal; } 実行結果 子1 子2 子3 子4 vertical : 垂直方向（上下）のみリサイズ可能変更できる方向は垂直方向（上下）のみ 。以下は overflow: autoの場合。
CSS : vertical auto .parent { overflow: auto; resize: vertical; } 実行結果 子1 子2 子3 子4scrollとhiddenの場合は以下。
scrollの場合 CSS : vertical scroll .parent { overflow: scroll; resize: vertical; } 実行結果 子1 子2 子3 子4 hiddenの場合 CSS : vertical hidden .parent { overflow: hidden; resize: vertical; } 実行結果 子1 子2 子3 子4 リサイズの上限と下限下記コードの実行結果では縦横15emの正方形ができる。
この正方形はリサイズ可能であるが、縦横とも10em～20emの範囲のみ。
CSS : リサイズの上下限 .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 ); } HTML : 適用するHTML <div class="sample"> リサイズ可能（10em ～ 20em） </div> 実行結果 リサイズ可能（10em ～ 20em） <textarea> テキストエリアメジャーなブラウザでは、テキストエリア要素( <textarea>)はデフォルトで垂直方向のリサイズが可能である。（＝resize: verticalが指定されている状態）
HTML : 適用するHTML <textarea class="sample"> テキストエリア </textarea> 実行結果 テキストエリアこのリサイズを禁止したい場合、resize: noneを指定する。
CSS : リサイズを禁止 .sample { resize: none; } 実行結果 テキストエリアなお、両方向のリサイズを可能にするにはbothにする。
CSS : 両方向にリサイズ .sample { resize: both; } 実行結果 テキストエリアEmmet : ov tov rsz
記述Visual Studio Code ovoverflow: hidden; ovaoverflow: auto; tovtext-overflow: ellipsis; tovctext-overflow: clip; rsresize: none; rsbresize: both; rshresize: horizontal; rsvresize: vertical; リンク- height | width | max-height | max-width | min-height | min-width : 高さと幅
- overflow-wrap | word-wrap : 長い単語間の改行禁止
- white-space : スペース・タブ・改行の表示方法
- MDN（日本語） > CSS > overflow
- MDN（日本語） > CSS > text-overflow
- MDN（日本語） > CSS > resize
- W3C（英語） > CSS 2.1 ( 勧告 ) > visufx.html#overflow
- W3C（英語） > CSS Basic User Interface Module Level 3 ( 勧告 ) > #text-overflow
- W3C（英語） > CSS Basic User Interface Module Level 3 ( 勧告 ) > #resize