「CSS」overflowプロパティscrollを指定しスクロールで表示する
書式
overflow : 値
scrollは表示領域を超えた分は、スクロールで表示します。日本語は改行されます。内容は、必要に応じてパディングボックスに合わせて切り取られます。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
.cft {
width: 150px;
height: 150px;
overflow: scroll;
background: SkyBlue;
}
</style>
</head>
<body>
<p class="cft">
内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cft {
width: 150px;
height: 150px;
overflow: scroll;
background: SkyBlue;
}
</style>
</head>
<body>
<p class="cft">
内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず
</p>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> .cft { width: 150px; height: 150px; overflow: scroll; background: SkyBlue; } </style> </head> <body> <p class="cft"> 内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず </p> </body> </html>
結果
画面に表示領域を超えた分はスクロールで表示します。