概要へ移動

このページで解説するコードの実行結果。

文字列や子要素のボックスが、親要素のボックスからはみ出す場合がある。

文字列
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 vertical

overflow : はみ出す場合の処理

(表) 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.
autoscrollの場合
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 : リサイズ

はみ出す場合、リサイズ(大きさを変更)するような設定ができる。

ただし、overflowvisibleの場合は無効になるので、autoscrollhiddenのいずれかを設定しておく。

(表) resizeの設定値
設定値リサイズ可能な方向デフォルト
none不可
both両方向(上下左右)
horizontal水平方向 (左右)のみ
vertical垂直方向 (上下)のみ

デフォルトはnoneであり、リサイズできない。(ここまでの実行結果はリサイズできない)

both : 両方向(上下左右)リサイズ可能

オレンジ色のボックスの右下の角にあるマークをドラッグすると、大きさを変更できるようになる。

変更できる方向は 両方向(上下左右) 。以下は overflow: autoの場合。

CSS : both auto
.parent {
overflow: auto;
resize: both;
}
実行結果
子1
子2
子3
子4

scrollhiddenの場合は以下。

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
子4

scrollhiddenの場合は以下。

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
子4

scrollhiddenの場合は以下。

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の正方形ができる。

この正方形はリサイズ可能であるが、縦横とも10em20emの範囲のみ。

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;