Свойство CSS overflow
Свойство overflow определяет, что происходит с содержимым, которое слишком велико, чтобы поместиться в своей области. Оно решает, обрезать ли содержимое или добавить полосы прокрутки.
Оно может принимать следующие значения:
visible— значение по умолчанию. Выходящее за пределы содержимое не обрезается и выходит за пределы блока.hidden— выходящее за пределы содержимое обрезается и скрывается.scroll— полосы прокрутки добавляются всегда.auto— как scroll, но полосы прокрутки добавляются только при необходимости.
CSS overflow: visible
По умолчанию overflow имеет значение visible, поэтому содержимое не обрезается и отображается за пределами блока элемента.
Пример
Лишнее содержимое выходит за пределы кораллового блока.
<style> задайте <div> ширину 200px, высоту 65px, коралловый фон и overflow visible. Поместите внутрь больше текста, чем помещается, чтобы контент выходил за пределы блока.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
CSS overflow: hidden
При значении hidden выходящее за пределы содержимое обрезается, а остальная часть содержимого скрывается.
Пример
Содержимое, которое не помещается, обрезается.
<style> задайте <div> ширину 200px, высоту 65px, коралловый фон и overflow hidden. Поместите внутрь больше текста, чем помещается, чтобы лишний контент обрезался и скрывался.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: hidden;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
CSS overflow: scroll
При значении scroll всегда добавляются как горизонтальная, так и вертикальная полосы прокрутки, чтобы пользователь мог прокрутить и увидеть всё содержимое.
Пример
Полосы прокрутки всегда отображаются на блоке.
<style> задайте <div> ширину 200px, высоту 65px, коралловый фон и overflow scroll, чтобы полосы прокрутки отображались всегда. Поместите внутрь больше текста, чем помещается.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: scroll;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
CSS overflow: auto
Значение auto похоже на scroll, но полосы прокрутки добавляются только тогда, когда они нужны.
Пример
Полоса прокрутки появляется только потому, что содержимое выходит за пределы блока.
<style> задайте <div> ширину 200px, высоту 65px, коралловый фон и overflow auto, чтобы полосы прокрутки появлялись только при необходимости. Поместите внутрь больше текста, чем помещается.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: auto;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>