Согласно концепции блочной модели CSS, каждый элемент на странице представляет собой прямоугольный блок. Размером, положением и поведением этих блоков можно управлять с помощью CSS. Под поведением я имею в виду то, как он обрабатывает изменения содержимого внутри и снаружи коробки. Например, если вы не задали высоту поля, высота поля будет увеличиваться по мере необходимости, чтобы вместить его содержимое. Но что происходит, когда вы указываете высоту или ширину поля, а содержимое внутри превышает его? Настало время добавить свойство CSS overflow, которое позволит вам указать, как поступать в этой ситуации.
Свойство overflow имеет четыре значения: видимый (по умолчанию), скрытый, прокрутка и автоматический . Есть также два родственных свойства overflow: overflow-y и overflow-x, которые используются редко.
Давайте рассмотрим каждое из этих значений и обсудим распространенное использование и методы.
Видимый
Если вы не установили атрибут переполнения, отображается значение атрибута переполнения по умолчанию. Таким образом, в целом нет смысла специально устанавливать свойство overflow видимым, если только вы не хотите переопределить значение, которое оно установлено в другом месте.
Здесь важно помнить, что, хотя контент за пределами поля виден, он не влияет на рабочий процесс страницы. например:
Вообще говоря, вам, по крайней мере, не нужно задавать фиксированную высоту для полей, содержимое которых представляет собой текст, поэтому вы не столкнетесь с такой ситуацией.
Скрытый
Значение, противоположное видимому значению по умолчанию, скрыто. Он скроет все, что находится за пределами коробки.
Это действительно полезно для работы с динамическим контентом, который может вызвать некоторые проблемы с макетом из-за переполнения контента. Однако помните, что контент, скрытый с помощью этого метода, вообще не будет виден (если вы не посмотрите исходный код). Например, некоторые пользователи установили шрифт по умолчанию в своем браузере больше, чем вы ожидали. Вы вытолкнете часть текста за пределы поля и полностью скроете его...