CSS基礎 - overflow:hidden 详解
この文章では、CSSプロパティ `overflow: hidden;` の役割について詳しく解説します。単一行テキスト、複数行テキスト、およびフロート要素への適用、そして他のプロパティとの組み合わせ効果について説明します。
---overflow:hidden 単一行テキスト溢出
`overflow: hidden;` は、要素の内容が要素のボックスから溢れた場合に、溢れた部分を非表示にするために使用されます。単一行テキストの場合、テキストが要素の幅を超えると、`overflow: hidden;` は溢れたテキストを非表示にします。
`text-overflow: ellipsis;` と `overflow: hidden;` 、そして `white-space: nowrap;` を組み合わせて使用すると、省略記号（...）でテキストを省略することができます。
コード例:
<style>
.ellipsis {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<p class="ellipsis">これは省略されるテキストの例です。</p>
スクリーンショット:
overflow:hidden 複数行テキスト溢出
複数行テキストの場合、`-webkit-line-clamp` プロパティを使用してテキストの行数を制限し、`overflow: hidden;` で溢れた部分を非表示にすることができます。`display: -webkit-box;` と `-webkit-box-orient: vertical;` も合わせて設定する必要があります。
コード例:
<style>
.multi-line-ellipsis {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 行数を3行に制限 */
-webkit-box-orient: vertical;
}
</style>
<p class="multi-line-ellipsis">これは複数行のテキストで、3行を超えると省略されます。</p>
スクリーンショット:
overflow:hidden 清除浮動
フロート要素は、通常のドキュメントフローから外れて配置されるため、親要素の高さが計算されなくなり、レイアウトが崩れることがあります。`overflow: hidden;` を親要素に設定すると、フロートを含む要素の高さが計算されるようになり、この問題を解決できます。
コード例:
<style>
.container {
border: 1px solid black;
overflow: hidden; /* フロートのクリア */
}
.float {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
<div class="container">
<div class="float"></div>
</div>
スクリーンショット:
overflow:hidden と他のプロパティの組み合わせ
`overflow: hidden;` は他のプロパティと組み合わせて使用することで、様々な効果を得ることができます。例えば、`border-radius` プロパティと組み合わせて、角丸の効果を実現することができます。
コード例:
<style>
.rounded-corners {
width: 100px;
height: 100px;
background-color: lightgreen;
overflow: hidden;
border-radius: 10px;
}
</style>
<div class="rounded-corners"></div>
スクリーンショット:
---
Q&A
Q1: `overflow: hidden;` と `text-overflow: ellipsis;` の違いは何ですか？
A1: `overflow: hidden;` は要素の内容が要素のボックスから溢れた場合に、溢れた部分を非表示にします。一方、`text-overflow: ellipsis;` は、テキストが要素の幅を超えた場合に、省略記号（...）でテキストを省略します。単一行テキストを省略する場合は、両方のプロパティを組み合わせる必要があります。
Q2: `overflow: hidden;` を使用してフロートをクリアする方法は？
A2: フロートを含む要素に `overflow: hidden;` を設定すると、フロートを含む要素の高さが計算されるようになり、フロートがクリアされます。
Q3: `overflow: hidden;` はどのような場合に使用すべきですか？
A3: `overflow: hidden;` は、要素の内容が要素のボックスから溢れた場合に、溢れた部分を非表示にする必要がある場合に使用します。例えば、単一行または複数行のテキストを省略する場合、フロートをクリアする場合、角丸の効果を実現する場合などに使用します。