「CSS」overflowプロパティのscroll属性でスクロールを表示するサンプル
環境
Google Chrome 103.0.5060.114
Windows 10 Home 64bit
構文
overflow: scroll
表示領域を超えた分は、スクロールで表示します。
日本語は改行されます。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
.cftA,.cftB {
border: 1px solid #000;
width: 180px;
height: 50px;
background: skyblue;
overflow: scroll;
}
</style>
</head>
<body>
<p class="cftA">ancdefghijkkmn12345678</p>
<p class="cftB">12345表示領域を超える場合の表示方法</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cftA,.cftB {
border: 1px solid #000;
width: 180px;
height: 50px;
background: skyblue;
overflow: scroll;
}
</style>
</head>
<body>
<p class="cftA">ancdefghijkkmn12345678</p>
<p class="cftB">12345表示領域を超える場合の表示方法</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cftA,.cftB {
border: 1px solid #000;
width: 180px;
height: 50px;
background: skyblue;
overflow: scroll;
}
</style>
</head>
<body>
<p class="cftA">ancdefghijkkmn12345678</p>
<p class="cftB">12345表示領域を超える場合の表示方法</p>
</body>
</html>
結果
段落の文字の表示領域を超えた分はスクロールで表示します。