CSS Tutorial for Beginners - 36 - The overflow property Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in this tutorial we are going to look at
the overflow property and I've set up
just a couple of content panels here
that hold a couple paragraphs as you can
see and let's just go ahead and take a
look at these right now and there you
can see we have two paragraphs in each
one of our main content panels now the
current state of these is that they do
not have a height and width so they will
naturally expand to whatever we put
inside there in this case text but let's
change things up what we're going to do
is we'll keep this one the same but in
our second content panel we will add a
fixed height so let's go ahead and do
that and we'll say height equals 120
pixels so let's save the stylesheet and
let's open this up and you can see now
since we fix this second content pane at
a hundred and twenty pixels the text
starts rolling off of it because we said
stop here at 120 but the text continues
to roll off of here
so that's where the overflow property
comes into play we can actually tell the
browser to do a couple things when an
event like this happens so let's close
this out and let's use the overflow
property so all we do is type in
overflow and of course we need a colon
now there's a couple different options
that I like to use here the first one is
to set up a scrollbar
so all we have to do is put in the
parameter scroll we hit save here and
there you can see we have a nice
scrollbar that is inserted now and this
is handled properly so that's one
parameter that you can use now you can
also hide the text and in that event you
just use the parameter hidden so let's
save this and if we open this up now you
can see the text is hidden so that's
another strategy that you can take now
you can also actually set up inheritance
with the overflow property like you can
do with any property so we could stick
this up here in the body section and
then all of your child elements would
have this what I like to call Auto
healing mechanism in case something goes
wrong okay that is going to do it for
this tutorial