ボックスの高さを固定してコンテンツを非表示にしたい
横に同じ形のボックスが並ぶときなどに、コンテンツを表示することよりも高さを揃えることを優先したいケースがごくまれにあります。その場合は、ボックスに「overflow:hidden;」を適用します。
overflow:hidden;の別の用途
「overflow:hidden;」は、高さを指定したボックスからはみ出したコンテンツを非表示にするのが本来の機能です。しかし、実際は本来の機能で使われることよりフロートの解除に使われることが多いです。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
body{
font-family: sans-serif;
}
.sale-box{
overflow: hidden;
padding: 20px 20px 0 20px;
width: 260px;
height: 280px;
background:#ffc41c;
text-align: center;
}
.sale-box h1{
font-size: 50px;
}
</style>
</head>
<body>
<div class="sale-box">
<h1>SALE</h1>
<p>最大50％OFF</p>
<p>2F婦人服売り場すぐ横にて開催</p>
<p>秋服から冬服まで、絶賛売り尽くしセール。婦人服から子供服まで在庫限りとなります。</p>
</div>
</body>
</html>実行結果
