Conteúdo do Curso
Advanced CSS Techniques
Advanced CSS Techniques
Content Overflow
Let's consider how we can control the content overflow with the help of one property. Sometimes happens that we have the fixed width
and height
of the element. However, the inner content is much bigger than the available space. The overflow
property controls the behavior of an element's content when it exceeds the height
or width
values explicitly set for the element.
visible
- is the default value. The content overflows the element borders and stays visible;scroll
- The content overflows the element borders, and the scrollbar appears that allows a user to scroll both vertically and horizontally;hidden
- The content that overflows the element borders size is cut and not visible;auto
- works the same asscroll
. However, the scrollbars appear only when the content overflows the element borders.
Note
The overflowing content does not affect the other elements' geometry.
visible
If the overflow
property is not set, its default value is visible
. It means that the content will be displayed outside the element's borders. In the example, the box's borders are highlighted in darkblue
, and the box has fixed width
and height
properties.
index
index
index
scroll
We can see the full element content using a scroll. Let's check the example:
index
index
index
hidden
All overflow content will be hidden, and a user will never see it. Generally, it is helpful only when we need to develop some decorative effects.
index
index
index
Obrigado pelo seu feedback!