Css overflow: что это такое и как работает

Объявление формы

Все HTML-элементы имеют прямоугольную блочную модель, которая управляет потоком
содержимого внутри и снаружи нее. Для того, чтобы придать элементу непрямоугольную
форму, мы используем свойства и . Когда я писала эту
статью, свойство применялось только для плавающих элементов, а свойство
не было полностью внедрено, поэтому при использовании этих свойств у вас
могут возникать ошибки. Свойства shape-* могут применяться только к блочным элементам.
Неблочные элементы должны приводиться стилями к блочным, и только тогда можно
использовать shape-свойства.

Shape-* свойства принимают одно из трех значений: auto, базовая фигура или URI
изображения. Если свойство установлено в auto, то плавающие элементы используют margin
box в обычном режиме. Если вы не знакомы с CSS box-model, то рекомендую
ознакомиться, потому что вы должны знать, как это работает.

Если свойству задана «функция формы» (shape function), то форма вычисляется на основе
выбора одного из значений функций — , , ,
, . Больше информации об этих функциях вы сможете найти в статье
команды Adobe Platform.

И наконец, если свойству задано URI изображения, браузер будет использовать изображение
для извлечения и вычисления формы, основываясь на альфа-канале изображения. Форма
вычисляет путь, который охватывает область, где непрозрачность указанного изображения
больше, чем значение параметра . Если параметр не задан, то исходным значением считается . Изображение должно быть
CORS-same-origin, в противном случае оно не будет работать, и значение shape-* свойства
автоматически установится в .

Формы, определенные при помощи свойства , определяют область
исключения на элементе, а те, которые определены с помощь свойства ,
определяют плавающую область на элементе. На примерах, приведенных ниже, мы узнаем,
что это означает.

Формы, определенные при помощи свойств shape-*, могут быть изменены при помощи и . Эти свойства говорят сами за себя.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Justify Content

Свойство определяет горизонтальное положение элементов. Это свойство похоже на Flex Wrap, но в justify сохраняется первоначальный порядок элементов.

В следующем примере  () все элементы вне зависимости от их ширины имеют горизонтальное позиционирование по центру родительского контейнера. Это похоже на свойства .

Значение добавляет пробелы между всеми inner-элементами, тем самым растягивая строку на всю ширину контейнера:

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

Пример выше со значением не имеет отступов на угловых элементах. Пример ниже со значением делает равные внешние отступы на всех элементах.

Идентичный прошлому пример с растянутым элементом middle:

Как видите, вам всё равно придётся экспериментировать с flex-элементами, чтобы достичь правильного результата именно для вашего случая. Результат, естественно, зависит и от размеров содержимого.

Что делать с дополнительным текстом?

Когда текста больше, чем может поместиться в доступное пространство макета, у вас есть несколько вариантов:

• Перепишите текст, чтобы он стал короче.
• Позвольте, чтобы текст выходил за пределы контейнера, и надейтесь, что макет может растягиваться, чтобы справиться с этой ситуацией.
• Обрежьте текст там, где он выходит за пределы контейнера.
• Добавьте полосы прокрутки (для текста — обычно вертикальные), чтобы с их помощью можно было просмотреть весь текст.

Лучшим вариантом, как правило, является последний: создать прокручиваемый текстовый блок. Тогда пользователь сможет прочитать весь текст, а макет останется без изменений.

HTML и CSS для этого:

<div style="overflow: auto; width:300px; height:200px;">здесь текст....</div>

overflow: auto; указывает браузеру добавлять полосы прокрутки (скролл), если текст выходит за границы блока div.

Но для того, чтобы это сработало, также нужно задать для этого блока div свойства ширины и высоты, чтобы определить границы контейнера.

Вы также можете обрезать текст, изменив значение свойства overflow с auto на hidden. Если вы не укажете свойство overflow, скролл на сайте работать не будет, и текст будет выходить за границы блока div.

Комбинирование CSS-форм с регионами и флексбоксами для создания журнальных макетов

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

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

Подобный макет может быть воссоздан при помощи CSS-форм и регионов

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

Значения свойства overflow

visible: значение по умолчанию. Оно задает отображение содержимого вне блока элемента и позволяет не «заталкивать» содержимое внутрь блока элемента.

hidden: содержимое, выходящее за пределы блока элемента, будет скрыто.

scroll: добавляет полосы прокрутки и скрывает содержимое, выходящее за пределы блока элемента. Его можно увидеть с помощью полос прокрутки.

auto: добавляет полосы прокрутки, если необходимо.

initial: устанавливает значение по умолчанию.

inherit: устанавливает значение, которое задано для родительского элемента.

Теперь осмотрим, как каждое из этих значений влияет на контент.

Why overflow happens

Many things can cause unwanted horizontal scrolling in your design, but generally it’s caused by 1 of 2 things: 

• The design layout has an element that is sized or positioned in a way that pushes it off the screen and outside the viewport.
• Interaction or animations that start offscreen. For example, you have a Heading flying in from the side. When the page loads, the initial position of the Heading might be off the screen. Even though the Heading ends up in the right spot after the animation has completed, its initial position causes the page to have overflow. 

An element is positioned in a way that it’s pushed off the screen and outside the viewport, which causes overflow. 
The initial position of a Heading with an interaction applied to it starts the Heading off the screen and causes overflow. 

Unwanted horizontal scrolling can be caused by a different scenario than the 2 mentioned above, but layout and animation-related overflow tend to show up the most.

CSS Справочники

CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы

CSS Свойства

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index

percent width layout

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

Когда макет слишком узкий, элемент сплющивается. Хуже того, вы не можете использовать для nav чтобы это исправить, потому как данное свойство не удержит от наступления колонку справа.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Мораль

Механизм float — еще одно средство раскладки наряду с абсолютным позиционированием.

Он отличаются в лучшую сторону, позволяя оставить элемент в потоке, что очень удобно для колоночной раскладки.

Однако его минусами является меньшая гибкость из-за того, что элементы нельзя двигать произвольно, и потому что возможность его применять может зависеть от порядка элементов в HTML-разметке.

Эта статья — часть находящегося в процессе написания цикла под рабочим названием «Учебник». Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории «Учебник», где они сейчас собраны в обратном хронологическом порядке.

Размеры блока по умолчанию

Если в CSS размеры блока не заданы, то они формируются следующим образом: ширина определяется шириной окна страницы или шириной внешнего блока. Блок занимает всю ширину окна страницы или внешнего блока за исключением отступов. А высота блока устанавливается такой, чтобы в блок поместилось всё содержимое. Для примера создадим блок без указания размеров и посмотрим, как он выглядит. Чтобы видеть размеры блока, зададим рамку с помощью свойства border . Подробно рамки будут рассмотрены в следующей теме, а пока просто скопируйте это свойство.

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

overflow-x и overflow-y

Свойства overflow-x hidden и overflow-yзадают, как содержимое, выходящее за рамки контейнера, отображается в горизонтальном и вертикальном направлении. Для них можно задать все шесть значений, описанных выше.

Давайте рассмотрим примеры.

HTML

<div id="box">
	<div id="inner_box"></div>
</div>

Если ширина внешнего блока составляет 200 пикселей, а внутреннего — 250 пикселей, то задав для внешнего блока overflow-x: auto, мы добавим в него горизонтальную полосу прокрутки, так как ширина содержимого превышает ширину блока.

Если высота внешнего блока 100 пикселей, а высота внутреннего блока — 150 пикселей, то overflow-y: auto добавляет вертикальную полосу прокрутки.

Разбивка длинного текста

Предположим, что одно слово превышает ширину контейнера, и вы не хотите ни скрывать выходящий за пределы контейнера текст, ни добавлять полосу прокрутки. В этом случае можно разбить слово и принудительно перенести его на новую строку, используя свойство word-wrap, указав для него значение break-word.

HTML

<div id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisquegegetcondimentumsapien.Namin ligula molestie, laoreet neque cursus.
</div>

CSS

#box {
    width: 200px;
    height: 100px;
    background-color: #FD2D0F;
}

Если мы укажем word-wrap: break-word, выходящее за пределы контейнера слово разбивается на два, чтобы оно могло вписаться в пределы контейнера body overflow hidden.

Значения

visible

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

hidden

Выходящий за границы контейнера контент будет скрыт.

scroll

Аналогично hidden, за исключением того, что добавляется полоса прокрутки, чтобы пользователи могли прокручивать скрытый контент.

auto

Если контент выходит за пределы своего контейнера, этот контент будет скрыт и появится полоса прокрутки. То есть в отличие от предыдущего значения полоса прокрутки появится только при необходимости.

initial

использует значение по умолчанию – .

inherit

перенимает значение переполнения от родительского элемента.

Текстовый контент естественным образом переноситься на новые строки (если не используется ), поэтому текст редко может быть причиной переполнения. Переполнение чаще возникает, когда заданы явные значения ширины и высоты блока.

​Применяя условно

Наведение, фокус и другие состояния

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use to only apply the utility on hover.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use to apply the utility at only medium screen sizes and above.

To learn more, check out the documentation on Responsive Design, Dark Mode and .

Принцип работы

Как и позиционирование, float используется для того, чтобы двигать боксы. Но в отличие от позиционирования, которым можно двигать боксы практически произвольно, все, что может float — это сдвинуть элемент к одной из сторон потока, правой или левой.

При этом сам бокс и следующие за ним в потоке приобретают интересное поведение:

1. Float’нутый бокс смещается по горизонтали и прилипает к одной из сторон родителя.
2. Float’нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). С его неприжатой к родителю свободной стороны появляется свободное место.
3. Следующие за ним блочные боксы подтягиваются вверх и занимают его место, как если бы float’нутого бокса в потоке не было.
4. Строчные же боксы внутри подвинувшихся наверх блоков начинают обтекать float’нутый бокс со свободной стороны.

Хочу еще раз подчеркнуть неочевидную сразу вещь: сама коробка блока, следующего за float’ом, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает float.

Дальше интересно, как себя ведут float’нутые в одну сторону боксы, которые идут один за другим. В этом случае следующий бокс будет пытаться уместиться сбоку от предыдущего, с его свободной стороны. И только если ему там не будет достаточно места, тогда он сместится ниже и будет пытаться уместиться уже там.

Есть еще один маленький технический аспект, не обязательный для понимания всей «механики». Заfloat’ить можно как блочные боксы, так и строчные. При этом строчные тут же автоматически становятся блочными. То есть, писать для float’а излишне.

Из двух описанных особенностей float’ов — прижимание к краю и стыкование сбоку друг друга — вытекают два основных применения их в раскладке:

• разделение страницы на колонки
• горизонтально расположенные меню

#1. Осветление фона

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

CSS

Чтобы назначить стиль, нам нужно определить стиль CSS самого окна поиска. Давайте добавим все правила CSS один за другим, чтобы вы точно знали, что происходит.

Сначала оформим класс контейнера

Наиболее важное свойство, возможно, . Это специально, чтобы значок можно было поместить поверх ввода, как вы увидите

Input

Затем мы назначим стиль input. Все вышеизложенное является украшательством, поскольку радиус границы или цвет фона не влияют на функциональность input

Обратите внимание на свойства левого отступа. Это, чтобы освободить место для значка, чтобы он не находился буквально над текстом внутри input

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

Icon

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

Добавление эффектов Hover

Следующий набор правил определяет то, что происходит с полем поиска при наведении. В этом примере мы хотим изменить цвет фона. Чтобы избавиться от жёлтого или синего свечения вокруг входа (который иногда добавляют браузеры), установите .

В приведённом выше фрагменте мы добавили два дополнительных состояния —  и . Таким образом, эффект не исчезает при задержке на input

Что ещё более важно, эффект проявляется также при input

Создание перехода

Чтобы осуществить переход, нам необходимо добавить несколько строк кода. Вернемся назад к правилу, в котором мы определили стиль ввода  . Перед закрывающими скобками добавьте следующий фрагмент:

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

Стиль input теперь должен выглядеть, как код ниже.

Как работают переходы CSS?

Если вы ничего не знаете о CSS transitions, позвольте мне дать вам краткий обзор. Во-первых, для перехода свойство должно быть определено в состоянии default, а не при hover, или active или focus.

Переходы CSS позволяют постепенно изменять эффект и определить параметры контроля, такие как свойство, продолжительность перехода и вид перехода. Вы можете установить несколько переходов для одного элемента. Главное, вы всегда должны включать префиксы поставщиков для различных браузеров, поскольку поддержка этого свойства еще не является универсальной.

За дополнительной информацией обращайтесь: CSS3 Transitions And Transforms From Scratch

overflow-x and overflow-y

The and properties specifies
whether to change the overflow of content just horizontally or vertically (or
both):

specifies what to do with the left/right edges of the
content. specifies what to do with the top/bottom edges of the
content.

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.

Example

div {  overflow-x: hidden; /* Hide horizontal scrollbar
*/  overflow-y: scroll; /* Add vertical scrollbar */}

All CSS Overflow Properties

Property	Description
overflow	Specifies what happens if content overflows an element’s box
overflow-wrap	Specifies whether or not the browser can break lines with long words, if they overflow its container
overflow-x	Specifies what to do with the left/right edges of the content if it overflows the element’s content area
overflow-y	Specifies what to do with the top/bottom edges of the content if it overflows the element’s content area

❮ Previous
Next ❯

visible

overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.

HTML

<div id="box">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget condimentum sapien. Nam in ligula molestie, laoreet neque cursus, dapibus felis. Donec ut malesuada ipsum, id euismod lacus. Quisque et mauris faucibus, sodales ligula id, volutpat dolor. Aenean id tortor lectus.
</div>

CSS

#box {
	width: 200px;
	height: 100px;
	background-color: #FD2D0F;
	overflow: visible;
}

Ширина и высота элемента div установлена на 200px и 100px. Если размеры содержимого больше размеров блока, то оно выходит за его пределы.

Кросс-браузерность.

Как и у большинства свойств CSS, у свойства overflow есть свои особенности обработки в разных браузерах.

Скроллбары должны быть внутри или снаружи элемента?

Firefox располагает их снаружи, IE — внутри. Я считаю, что только IE располагает их правильно (они должны быть внутри).

Ошибка расширения элемента в IE 8.

В новой версии IE появились новые ошибки, в том числе и такие серъёзные, из-за которых пропадает всё содержимое страницы. .

Плавающий макет.

IE версий 6, 7 и 8 игнорируют значение по умолчанию visible для фиксированных размеров и расширяет элемент, чтобы подогнать контент

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

Ещё про IE

IE отображает вертикальный скроллбар независимо от того, нужен он или нет. В некоторых случаях это может быть и полезно, но не всегда. Чтобы избавиться от этого, необходимо установить overflow: auto для элемента body.