概要
CSSプロパティ「overflow」は、ボックス領域からテキストなどがはみ出した場合に、その部分をどう制御するかを指定することができます。この領域とは、ボックスに指定した幅や高さのことを指し、width プロパティや height プロパティを使用します。
<div class="hidden">幅と高さを指定したボックス領域から、はみだしたテキストは表示されません。<br>幅と高さを指定したボックス領域からはみだしたテキストは表示されません</div>
<style>
div {
width: 200px;
height: 100px;
background-color: #def;
margin-bottom: 10px;
}
.hidden {
overflow: hidden;
}
</style>例えば、『内容は多いがその要素の高さは抑えたい』といったコンテンツを作成したい場合、 ｢scroll｣を指定することで、領域からはみ出た場合はスクロールバーが表示されます。スマートフォンサイトなどでよく見られる横スクロールコンテンツを作成する時に有用です。CSS3で追加されているプロパティ flex を組み合わせてて実現しています。
<p>ボックス要素を横スクロールさせる一例 </p>
<div class="scroll">
<ul>
<li>ボックス要素１</li>
<li>ボックス要素１</li>
<li>ボックス要素１</li>
</ul>
</div>
<style>
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
}
li {
list-style: none;
height: 100px;
background-color: #fff;
border: 1px solid #000;
margin-right: 20px;
flex: none;
}
div {
width: 200px;
height: 120px;
background-color: #def;
padding: 10px;
}
.scroll {
overflow: scroll;
}
</style>他にも、text-overflow プロパティとwhite-space プロパティを組み合わせることではみ出したテキストに省略符号（･･･）を表示させることができます。詳しくは後述する使用例で紹介します。
取りうる値
| 値 | 説明 |
|---|---|
| visible | 初期値 |
| hidden | 領域からはみ出た部分は非表示になる |
| scroll | 領域からはみ出る部分があるときはスクロールバーが表示される |
| auto | 閲覧する環境に依存 |
実用における注意点
このプロパティですが、領域からはみ出た場合の振る舞いを定義しますので、領域の幅や高さを定義してあげる必要があります。
<div>このボックス要素には幅も高さも指定されていないので、テキストが隠れることなく全て表示されます。</div>
<style>
div {
background-color: #def;
overflow: hidden;
}
</style>使用例
各値の例です。ボックスには 200px × 50px の｢領域｣が指定されています。このボックスからはみ出た部分がどのような振る舞いをするか確認してみてください。
<div class="auto">幅と高さを指定したボックス領域からテキストがはみだした場合、閲覧するブラウザに依存する振る舞いをします</div>
<div class="hidden">幅と高さを指定したボックス領域からはみだしたテキストは表示されません</div>
<div class="scroll">幅と高さを指定したボックス領域からテキストがはみだすとスクロールバーが表示されます</div>
<div class="visible">幅と高さを指定したボックス領域からテキストがはみだしても、そのまま表示されます</div>
<style>
div {
width: 200px;
height: 50px;
background-color: #def;
margin-bottom: 10px;
}
.auto {
overflow: auto;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.visible {
overflow: visible;
}
</style>省略符号の実装例
text-overflow プロパティとwhite-space プロパティを組み合わせて省略符号を表示させてみます。ポイントは、white-space に｢nowrap｣ を指定することで文字の折り返しを禁止してます。そして、はみ出したテキストは text-overflow に｢ellipsis｣ を指定することで省略符号を表示させることができました。
<p class="ellipsis">はみ出したテキストに省略符号を表示させます。はみ出したテキストに省略符号を表示させます。</p>
<style>
p {
width: 300px;
background-color: #def;
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>