Свойство CSS overflow

Свойство CSS overflow отвечает за ситуацию, если содержимое элемента вылазит за рамки поставленных размеров. С помощью этого свойства можно корректно обрабатывать данные ситуации.

Синтаксис CSS overflow

overflow: value;

Где value может принимать значения:

  • visible – отображать все содержимое даже за пределами объекта
  • hidden – не выводить содержимое за пределами объекта (все что не влезает внутрь будет скрыто)
  • scroll – добалять полосу прокрутки (всегда)
  • auto – добавлять полосу прокрутки только при необходимости
  • inherit – унаследование от элемента родителя;

Пример №1. Использование overflow:visible

Ниже представлен код примера, который выводит содержимое (текст) даже за пределами объекта.

<html>
<head>
<style>
.primer1{
width: 100px;
height: 40px;
border: 1px solid #000;
overflow: visible;
}
</style>
</head>
<body>
<div class="primer1">Пример №1 использования overflow:visible</div>
</body>
</html>





Вот как это выглядит на странице:

Пример №1 использования overflow:visible

Пример №2. Использование overflow:auto

Ниже представлен код примера, который выводит содержимое (текст) даже за пределами объекта.

<html>
<head>
<style>
.primer2{
width: 120px;
height: 50px;
border: 1px solid #000;
overflow: auto;
}
</style>
</head>
<body>
<div class="primer2">Пример №2 использования overflow:auto</div>
</body>
</html>

Вот как это выглядит на странице:

Пример №2 использования overflow:auto




Читайте также:

• Как сделать треугольник через CSS

• Свойство display

• Свойство transform

• Все про CSS border

• Все про CSS background

• Все про CSS transition

• Свойство box-shadow

• Медиа запросы (@)


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.