In the introduction lesson, says to see how some of the properties affect the elements, and overflow is one of them, but what is Overflow?
Answer
Every element is a box, most often rectangular. But when one element becomes a container, i.e. it contains other elements inside it like a paragraph tag inside a div:
<div>
<p> Here’s some text </p>
</div>
Then the container (also called parent element) might not always be large enough for the content and then we will need to decide how can we fix that issue. The overflow property helps us with that. It controls what happens to the content when, because of its size in relation to the parent element, it breaks the bounds.
The overflow property has three main values, the default is visible which will allow us to see the container inside of the parent element (also called child) spill over or overflow from the container, the second value is hidden which will hide the part of the child element that would not fit inside the parent, and the third is scroll, which will allow us to have the overflowing text hidden, and it will give us a scroll bar to be able to see it.
As a designer, I’d imagine I might want to crop a photo in a div and maybe this could be used for that? Or if I was creating artistically with code perhaps!
Well what about those annoying “see more” when you’re reading an article or when you look at IG and you’re not logged in you can see a little scrolling but then after a little bit the IG prompt urges you to login to see more.
I’m not sure that that’s a typo. Containers are a design concept. The whole unit is setting up the whole boxy design idea. But you don’t have to take my word for it. If you right click on whatever web page and use inspect and see the HTML and CSS in developer tools they will have coded in containers for how they want the content inside a specific box (container) to look. That why html has
's to set up your sections so you can style them however you like.
overflow the way im understanding is any tex that oveflows the box model?
Also theres other values that can be used visible, hidden, scroll and auto which are values used on
css to implement a change in css? please let me know if im on the right track Thank you…
Not just text, background-color or Images could also be bigger than the container they are nested inside of. I’ve also seen some really cool effects done with transparent windows in the foreground that have a scrolling background that is larger than the container it’s in. There is also a scrolling marquee effect that looks pretty cool in the right situation and the overflow for that is hidden as well.
