В этом уроке мы узнаем о переполнении CSS с помощью различных примеров. Если вы явно не зададите высоту отображаемого блока с помощью свойства height, браузер автоматически рассчитает высоту, чтобы занять достаточно места для всего контента.
Но что произойдет, если вы установите свойство высоты, которое не обеспечивает достаточно места для всего контента? Это создает ситуацию, называемую переполнением.
Это происходит не только со свойствами min-height и max-height, но и со свойствами min-width и max-width, а также из-за других факторов, таких как отступы, поля и границы.
Давайте рассмотрим пример, в котором мы разработали внутреннюю таблицу стилей для создания переполнения.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>overflow Example</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
Sometimes, the content of an element's box will go over the dimension of its box. This can happen due to the number of reasons, including the content being larger than a box, or a box with negative margins. In such cases, we need to manage overflow by using overflow property.
</div>
</body>
</html>
Выход:
Как вы можете видеть в вышеприведенном выводе, текстовое содержимое просто выливается из нижней части блока, поскольку для всего содержимого недостаточно места. Это поведение по умолчанию для переполнения, которое в основном происходит, когда содержимое превышает размеры блока элемента.
Это может произойти с фиксированными размерами, минимальными/максимальными размерами и из-за дополнительных свойств интервала, таких как отступы, поля и границы. Чтобы преодолеть эту ситуацию, CSS предоставляет несколько способов обработки этого переполнения. Давайте разберемся.
Свойство переполнения CSS
Свойство overflow — это ненаследуемое свойство в CSS, указывающее, что делать с содержимым, которое выходит за границы блока элемента. Это свойство может принимать любое из следующих значений:
- visible
- hidden
- scroll
- auto
- inherit
Давайте разберемся со свойством CSS overflow с помощью этих значений и их влиянием на содержимое элемента.
CSS overflow: visible
Если вы установите свойство overflow со значением visible, оно не будет обрезать содержимое переполнения, и переполняющее содержимое выльется из блока. Другими словами, отображаемое содержимое выйдет за пределы блока элемента, если содержимое слишком большое и не помещается в блок.
Однако это значение по умолчанию для свойства overflow в CSS. Это означает, что если вы явно не зададите свойство overflow, содержимое, выходящее за пределы размеров блока элемента, будет отображаться за пределами блока без обрезки или скрытия.
Пример 2:
<!DOCTYPE html>
<html>
<head>
<title>overflow: visible Example</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: visible;
}
</style>
</head>
<body>
<div>
Sometimes, the content of an element's box will go over the dimension of its box. This can happen due to the number of reasons, including the content being larger than a box, or a box with negative margins. In such cases, we need to manage overflow by using overflow property.
</div>
</body>
</html>
В этом примере мы установили свойство overflow со значением visible. Таким образом, переполняющее содержимое будет отображаться за пределами заданной ширины и высоты поля.
CSS overflow: hidden
Если вы установите свойство overflow со значением hidden, оно обрезает переполняющий контент и не отображает его. Другими словами, скрытое значение обрезает переполняющий контент и делает остальной контент невидимым или недоступным. Давайте рассмотрим пример.
Пример 3:
<!DOCTYPE html>
<html>
<head>
<title>overflow: hidden Example</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div>
The content of this element's box is gone over the dimension of the box and is not visible because we have set the overflow property with the hidden value.
</div>
</body>
</html>
Выход:
В этом примере мы установили свойство overflow со скрытым значением. Таким образом, переполненное содержимое обрезается и не отображается за пределами поля.
overflow: scroll
Когда вы устанавливаете свойство переполнения со значением прокрутки, это значение обрезает переполнение и предоставляет полосу прокрутки для прокрутки к остальной части переполняющего содержимого. Полоса прокрутки появляется по краям окна отображения, что позволяет пользователям получить доступ ко всему переполняющему содержимому. Давайте рассмотрим пример на его основе.
Пример 4:
<!DOCTYPE html>
<html>
<head>
<title>overflow: scroll Example</title>
<style>
div {
width: 250px;
height: 100px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<div>
The content of this element's box is gone over the dimension of the box. Therefore, we have set the overflow property with scroll value that provides a vertical scrollbar to see the overflowing content.
</div>
</body>
</html>
Выход:
В этом примере мы установили свойство CSS overflow со значением scroll, которое обеспечивает полосу прокрутки, позволяющую увидеть оставшуюся часть переполняющего содержимого.
overflow: auto
Свойство overflow со значением auto добавляет полосу прокрутки только тогда, когда содержимое выходит за пределы поля элемента. Здесь веб-браузер определяет, что делать с переполненным содержимым. Он выбирает прокрутку или видимость, чтобы показать оставшуюся часть содержимого.
Пример 5:
<!DOCTYPE html>
<html>
<head>
<title>overflow: auto Example</title>
<style>
div {
width: 250px;
height: 100px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<div>
The content of this element's box is gone over the size of the box. Therefore, we have set the overflow property with auto value. The browser adds a vertical scrollbar to see the overflowing content.
</div>
</body>
</html>
Выход:
В этом примере мы установили свойство overflow со значением auto в правиле стиля CSS. Поэтому браузер автоматически добавляет вертикальную полосу прокрутки на краю поля отображения, чтобы увидеть переполняющее содержимое.
CSS overflow: inherit
Когда вы устанавливаете свойство overflow с наследуемым значением в правиле стиля CSS, поведение переполнения элемента будет унаследовано от его родительского элемента. Другими словами, он будет использовать значение переполнения, установленное для содержащего его блока. Это полезно, когда вы хотите поддерживать единообразное поведение переполнения во вложенных элементах. Давайте рассмотрим пример на его основе.
Пример 6:
<!DOCTYPE html>
<html>
<head>
<title>Overflow Inherit Example</title>
<style>
.parent {
width: 200px;
height: 100px;
border: 1px solid red;
overflow: scroll; /* Setting overflow for the parent element */}
.child {
overflow: inherit; /* Inheriting overflow behavior from the parent element */ width: 250px;
height: 150px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
This is the child element whose overflow behavior is inherited from its parent element. Since the parent element has an overflow setting of 'scroll', the child element will also exhibit the same overflow behavior.
</div>
</div>
</body>
</html>
Выход:
В этом примере мы определили родительский элемент, ширина и высота которого составляют 200 пикселей и 100 пикселей соответственно. Затем мы установили свойство overflow со значением scroll, что означает, что если содержимое переполняется, появятся полосы прокрутки. Также есть дочерний элемент, размеры которого больше родительского элемента, чтобы обеспечить переполнение.
В дочернем элементе мы установили свойство overflow со значением inherit, что означает, что он унаследует поведение overflow от своего родительского элемента. Поскольку родительский элемент имеет overflow: scroll;, дочерний элемент также будет иметь такое же поведение overflow.
В этом уроке вы узнали, как обрабатывать переполнение в CSS, когда содержимое превышает размеры блока элемента. Мы рассмотрели все примеры, основанные на свойстве overflow и его различных значениях, таких как auto, visible, inherit, scroll и hidden. Надеюсь, вы поняли основные моменты свойства CSS overflow и отработали все примеры.
