Переполнение CSS - httpdoc.ru

CSS переполнение

Свойство CSS overflow применяется к элементам уровня блока, обычно к контейнерам div. Он управляет дополнительным контентом, который переполняется из контейнера, если места недостаточно.

у вас есть контейнер div фиксированной высоты и ширины с некоторым содержимым внутри него. Контент больше доступного места в контейнере и выходит из div. Вы не можете увеличить высоту или ширину контейнера, потому что это нарушит макет веб-сайта. Теперь в этой ситуации, когда вы не можете изменить размеры родительского элемента для хранения данных, используется свойство CSS Overflow.

Свойства переполнения CSS

Свойства переполнения предоставляют различные варианты управления переполнением содержимого. Вы можете выбрать любой из них для контейнера в соответствии с требованиями:

Ценить Описание
видимый Пользователь видит переполнение содержимого. Это значение по умолчанию.
скрытый Скрывает переполненное содержимое.
прокрутка Он добавляет полосу прокрутки в контейнер.
авто Он добавляет полосу прокрутки в контейнер только при обнаружении переполнения.

Примечание. Свойство переполнения работает только для блочных элементов с фиксированными размерами. Если размеры не фиксированы, контейнер может занимать столько места, сколько необходимо для содержимого.


CSS Overflow Visible

CSS Overflow Visible - свойство по умолчанию. Он автоматически применяется браузером при обнаружении переполнения. Свойство Overlow visible совершенно не помогает, оно делает видимым для пользователя переполнение содержимого. Это означает, что он не обрезает переполненное содержимое. Давайте посмотрим на пример overflow:visible

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Overflow Visible </title> 
  <meta charset="UTF-8"> 
<style>
div {
    background-color: #eee;
    width: 200px;
    height: 75px;
    border: 1px dotted black;
    overflow: visible;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<div>You can use the overflow property when you want to have better control of the layout. 
The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>

Выход

CSS Overflow Visible
Вы можете использовать свойство переполнения, если хотите лучше контролировать макет. Свойство переполнения указывает, что происходит, если содержимое выходит за пределы поля элемента.

В выходных данных выше вы можете видеть, что переполненное содержимое видно за пределами размеров контейнера. Как overflow:visible и свойство по умолчанию, даже если вы не примените его, результат будет таким же.


CSS Overflow Hidden

Свойство Overflow Hidden скрывает переполненное содержимое. Если содержимое выходит за пределы контейнера, оно обрезается и скрывается.

Использование скрытого переполнения может привести к потере информации. Поскольку переполненное содержимое обрезается, пользователи могут читать только видимую часть содержимого, которое находится внутри контейнера. Они не могут получить доступ или прочитать все, что скрыто из-за переполнения.

Давайте посмотрим на пример overflow:hidden :

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Overflow Hidden </title> 
  <meta charset="UTF-8">
<style>
div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: hidden;
}
</style>
</head>

<body>
<h2>CSS Overflow</h2>
<p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p>
<div>You can use the overflow property when you want to have better control of the layout. 
The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

Выход

CSS Overflow Hidden
Вы можете использовать свойство переполнения, если хотите лучше контролировать макет. Свойство переполнения указывает, что происходит, если содержимое выходит за пределы поля элемента.

Как вы можете видеть на выходе, переполненный текст скрыт. Все, что контейнер не может вместить, скрывается. Но, как уже говорилось выше, проблема потери информации существует. Этого можно избежать, используя следующее свойство.


Прокрутка переполнения CSS

Прокрутка переполнения CSS добавляет полосы прокрутки в контейнер. Он устанавливает полосу прокрутки внутри поля. Полоса прокрутки всегда будет видна, даже если нет переполнения.

Проблема с overflow: scroll в том, что полосы прокрутки всегда будут видны. Это выглядит не очень хорошо, если у вас нет переполнения контента, тогда полосы прокрутки должны быть скрыты. Этот недостаток решается в overflow: auto, но сначала посмотрим на пример прокрутки переполнения.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Overflow Scroll </title> 
  <meta charset="UTF-8">
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>

<div>You can use the overflow property when you want to have better control of the layout. 
The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

Выход

CSS Overflow Scroll
Вы можете использовать свойство переполнения, если хотите лучше контролировать макет. Свойство переполнения указывает, что происходит, если содержимое выходит за пределы поля элемента.

Автоматическое переполнение CSS

CSS overflow auto - это улучшение overflow: scroll. В этом свойстве полосы прокрутки будут видны внутри контейнера только при переполнении. Если переполнения не обнаружено, боковые панели скрываются. Посмотрите на пример ниже, чтобы понять, как это работает:

Пример
< ! DOCTYPE html > 
< html > 
< head > 
< style > 
.ex1 { 
  background-color : lightblue ; 
  ширина : 165 пикселей ; 
  высота : 120 пикселей ; 
  перелив : авто ; 
} 

.ex2 { 
  цвет фона : голубой ; 
  ширина : 165 пикселей ; 
  высота : 150 пикселей ; 
  переполнение : авто; 
}
</ style>
</ head>
<body>

<h1>Свойство переполнения</ h1>

<h2>overflow: auto с полосой прокрутки</ h2>
<divclass = "ex1" >Как вы можете видеть в примере выше, то же самое overflow: auto применяется к обоим div. Только этот div имеет видимые полосы прокрутки, содержащие переполнение. </ div>

<h2>overflow: auto без полосы прокрутки<
div class = "ex2" > Другой div не имеет полос прокрутки, потому что содержимое помещается внутри контейнера. < / div > 
< / body > 
< / html >

Выход

Свойство переполнения

переполнение: автоматически с полосой прокрутки

Как вы можете видеть в приведенном выше примере, к обоим блокам div применяется одно и то же overflow: auto. Только этот div имеет видимые полосы прокрутки, содержащие переполнение.

переполнение: автоматически без полосы прокрутки

Другой div не имеет полос прокрутки, потому что содержимое помещается внутри контейнера.

Как вы можете видеть в приведенном выше примере, к обоим блокам div применяется одно и то же overflow: auto. Только этот div имеет видимые полосы прокрутки, содержащие переполнение. Другой div не имеет полос прокрутки, потому что содержимое помещается внутри контейнера.


Переполнение-x и переполнение-y

Свойства overflow-x и overflow-y управляют переполнением по горизонтальной и вертикальной осям соответственно.

Если вы хотите управлять только горизонтальным переполнением, используйте overflow-x, а для вертикального переполнения используйте overflow-y. Все указанные выше значения visible, hidden, auto и scroll можно использовать с обоими свойствами.

Пример
< ! DOCTYPE html > 
< html > 
< head > 
< style >  
div.ex1 { 
  background-color : lightblue ; 
  ширина : 50 пикселей ; 
  переполнение-x : прокрутка ; 
} 

div.ex2 { 
  цвет фона : голубой ; 
  ширина : 50 пикселей ; 
  переполнение-x : скрыто ; 
} 

div.ex3 { 
  цвет фона : голубой; 
  ширина : 50 пикселей ; 
  переполнение-x : авто ; 
}

div.ex4{
  цвет фона : голубой ; 
  ширина : 50 пикселей ; 
  переполнение-x : видимый ; 
}
</ style>
</ head>
<body>

<h1>Свойство overflow-x</ h1>

<p>Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. < / p > 

< h2 > overflow-x: scroll: < / h2 > 
< div class = "ex1" >Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. < / div > 

< h2 > overflow-x: hidden: < / h2 > 
< div class = "ex2" > Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. < / div > 

< h2 > переполнение-x:< / h2 > 
< div class = "ex3" > Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. < / div > 

< h2 > overflow-x: visible (по умолчанию): < / h2 > 
< div class = "ex4" >Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. < / div > 

< / body > 
< / html >

Примечание. Свойство переполнения управляет как горизонтальным, так и вертикальным переполнением. Во всех приведенных нами примерах мы использовали только текст как переполненный контент. Следует помнить, что текст переливается только по вертикальной оси, поэтому в приведенных выше примерах видна только вертикальная полоса прокрутки.