overflow

Текст

Атрибут overflow

Мы уже убедились, что контенер для текста может переполняться

^{Давайте посмотрим еще раз}

^{Создадим два конейнера для текста ( элементы p )}

^{Ограничим их размер шириной 400 и высотой 200 пикселей}

p {
    width: 400px;
    height: 200px;
}

^{На картинке контейнеры p обозначены красной рамкой}

^{Во втором контейнере есть текст, и, как мы видим, этот текст выходит за границы контейнера ( переполнение )}

^{Произошло переполнение ( overflow )}

^{Если теперь вставить текст в первый контейнер, и этот текст также будет превышать размер контейнера p, то произойдет крайне неприятная вещь - текст из первого контейнера наложится на текст второго элемента p}

^{Для разрешения таких ситуаций есть CSS-атрибут overflow}

overflow

Возможные значения
visible	Значение по умолчанию Текст может отображаться снаружи контейнера
hidden	Текст обрезается, прокрутки нет
scroll	Текст обрезается Полосы прокрутки появляются в любом случае, даже если нет необходимости ( текст не переполняет контейнер )
auto	Прокрутка появляется только при необходимости, т.е. если текст переполняет контейнер

---

Пример в песочнице