「CSS」overflowプロパティauto属性でブラウザによる設定サンプル
環境
Google Chrome 103.0.5060.114
Windows 10 Home 64bit
Google Chrome 103.0.5060.114
Windows 10 Home 64bit
Google Chrome 103.0.5060.114 Windows 10 Home 64bit
構文
overflow auto
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、
新しいブロック整形コンテキストを生成します。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
.cftA,.cftB {
border: 1px solid #000;
width: 120px;
height: 50px;
background: skyblue;
overflow: auto;
}
</style>
</head>
<body>
<p class="cftA">ancdefghijkkmn12345678</p>
<p class="cftB">表示領域を超える場合の表示方法</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cftA,.cftB {
border: 1px solid #000;
width: 120px;
height: 50px;
background: skyblue;
overflow: auto;
}
</style>
</head>
<body>
<p class="cftA">ancdefghijkkmn12345678</p>
<p class="cftB">表示領域を超える場合の表示方法</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cftA,.cftB {
border: 1px solid #000;
width: 120px;
height: 50px;
background: skyblue;
overflow: auto;
}
</style>
</head>
<body>
<p class="cftA">ancdefghijkkmn12345678</p>
<p class="cftB">表示領域を超える場合の表示方法</p>
</body>
</html>
結果
段落内容にスクロールが表示されます。