Свойство overflow задает способ отображения содержимого блочного элемента, если оно превышает размер блока.
Это свойство применимо к блочным элементам.
О блочных элементах (подробнее здесь...).
Значение свойства overflow
- visible – содержимое блока отображается полностью,
- hidden – отображается та часть содержимого, которая вмещается в границы блока,
- auto - при необходимости добавляются полосы прокрутки,
- scroll - полосы прокрутки всегда добавляются к блоку,
- inherit - принимает значение свойства родительского элемента.
Значение по умолчанию
- visible
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство overflow </title>
<style type="text/css">
p{border:#FF0000 solid 2px; font-size:28px; padding:5px; width:400px; height:50px;}
</style>
</head>
<body>
<p style="margin-bottom:20px;"> Как видите, содержимое блока отображается полностью. </p>
<p style="overflow:hidden;"> Как видите, не все содержимое блока отображено. </p>
<p style="overflow:auto;"> Полоса прокрутки появилась автоматически. </p>
<p style="overflow:scroll;"> Полосы прокрутки всегда добавляются к блоку. </p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство overflow </title>
<style type="text/css">
p{border:#FF0000 solid 2px; font-size:28px; padding:5px; width:400px; height:50px;}
</style>
</head>
<body>
<p style="margin-bottom:20px;"> Как видите, содержимое блока отображается полностью. </p>
<p style="overflow:hidden;"> Как видите, не все содержимое блока отображено. </p>
<p style="overflow:auto;"> Полоса прокрутки появилась автоматически. </p>
<p style="overflow:scroll;"> Полосы прокрутки всегда добавляются к блоку. </p>
</body>
</html>
Результат
