Overflow Hidden CSS: применение и особенности

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

Пример кода:

HTML:

  
  
Some text that is too long.....

CSS:

.box {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
img {
  float: left;
  margin-right: 20px;
  width: 100px;
  height: 100px;
}

В этом примере блок с классом "box" будет иметь ширину 300px, высоту 200px и так же то, что выходит за его границы будет скрыто. Внутри блока есть картинка и текст, которые будут располагаться рядом, т.к. картинка имеет float: left. Текст быстро превышает ширину блока, но при этом из-за свойства overflow: hidden он не выходит за рамки блока и не нарушает внешний вид страницы.

Вот еще один пример кода, в котором блок с класом "menu-list" имеет свойство overflow: hidden. Этот блок содержит список элементов меню, которые будут иметь ширину 100px и высоту 50px. Если количество элементов будет превышать высоту блока, то блок просто скроет все, что выходит за его границы.

HTML:

  Home
  About Us
  Products
  Contact Us

CSS:

.menu-list {
  width: 100px;
  height: 200px;
  overflow: hidden;
}
a {
  display: block;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #f4f4f4;
  border-bottom: 1px solid #ccc;
}

Этот код создает меню-список с элементами, каждый из которых имеет высоту 50px и является блочным элементом. Свойство overflow: hidden применяется к блоку с классом "menu-list", который имеет высоту 200px. Поэтому, если количество элементов в списке превышает 4, то все что не умещается в блок, будет скрыто.