Overflow X - управление переполнением горизонтальной прокрутки

Функция "overflow-x" задает, должны ли содержимое и элементы блока горизонтально прокручиваться, в случае если они не помещаются в пределы блока.

Значения, которые может принимать свойство "overflow-x":

1. "visible" (по умолчанию): содержимое выходит за пределы блока, если оно не помещается.

Пример кода:

css
   .my-block {
     overflow-x: visible;
   }
   

2. "hidden": содержимое, которое не помещается в блок, обрезается и не отображается.

Пример кода:

css
   .my-block {
     overflow-x: hidden;
   }
   

3. "scroll": появляется горизонтальная полоса прокрутки для просмотра содержимого, которое не помещается.

Пример кода:

css
   .my-block {
     overflow-x: scroll;
   }
   

4. "auto": горизонтальная полоса прокрутки появляется только в случае, если содержимое не помещается.

Пример кода:

css
   .my-block {
     overflow-x: auto;
   }
   

5. "inherit": наследует свойство "overflow-x" у родительского элемента.

Пример кода:

css
   .my-block {
     overflow-x: inherit;
   }
   

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

html

  Текст, который может быть слишком длинным для блока

css
.my-block {
  width: 200px;
  height: 100px;
  overflow-x: scroll;
}

В данном примере, если содержимое блока "my-block" не помещается по горизонтали, будет появляться горизонтальная полоса прокрутки для просмотра остатка текста.