These two properties work in a similar fashion as the overflow
property and accept the same values. The overflow-x
parameter works only on the x or left-to-right axis. The overflow-y
works on the y or top-to-bottom axis.
HTML
<div id="div-x">
If this div is too small to display its contents,
the content to the left and right will be clipped.
</div>
<div id="div-y">
If this div is too small to display its contents,
the content to the top and bottom will be clipped.
</div>
CSS
div {
width: 200px;
height: 200px;
}
#div-x {
overflow-x: hidden;
}
#div-y {
overflow-y: hidden;
}