Home >Web Front-end >CSS Tutorial >Learn new CSS features: Directional clipping overflow:clip
This article will introduce a new feature, starting from Chrome 90, a new feature added to overflow - overflow: clip
, use it to easily control the overflow direction.
First, let’s briefly introduce the usage of overflow: clip
.
overflow: clip
: is very similar to overflow: hidden
. It also clips the padding-box
of the element. [Learning video sharing: css video tutorial, web front-end]
However, they have two differences:
That is, overflow: clip
completely prohibits any form of scrolling internally. Of course, this is not the focus of today, so let’s skip it for now.
##MDN Original text: The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
overflow: clip can control clipping from the x and y axis directions, but
overflow: hidden cannot.
overflow: clip Expression form with
overflow: hidden:
<div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div> <div class="hidden"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div> <div class="clip"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div>
.hidden { overflow: hidden; } .clip { overflow: clip; }We set up 3 DIV containers, one of which does not set overflow, and the other two set
overflow: clip and
overflow: hidden. The effect is as follows:
overflow: clip behaves the same as
overflow: hidden.
can be set individually on the x/y axis
overflow: clip is unique The difference is that it can be set to the x-axis or y-axis separately, so that the container has the ability to crop in a certain direction, while allowing overflow in the other direction.
overflow -x: hidden or
overflow-y: hidden, the expression is consistent with
overflow: hidden, which is all-round cropping
overflow-x: clip/
overflow-y: clip matches the other direction
overflow-x: visible , but it can allow overflow in one direction and crop in one direction!
overflow: hidden will create a BFC, so there is no way to just Limit one direction;
overflow: clip does not create BFC, so they will produce inconsistent phenomena in many performances (for example)
CodePen Demo -- overflow: hidden & overflow: clip
At this point, we have achieved such an effect, allowing one-way clipping of elements in the x/y direction, like this:(The above figure allows overflow in the x-axis direction, while cropping is performed in the y-axis direction)
overflow: hidden.
clip-path to achieve single-directional clipping of top, bottom, left, and right. This is the content of my previous article -
How to implement overflow: hidden without using overflow: hidden. If you are interested, you can take a look.
Original address: https://www.cnblogs.com/coco1s/p/16627152.htmlAuthor: ChokCoco
For more programming related knowledge, please visit: Programming Video! !
The above is the detailed content of Learn new CSS features: Directional clipping overflow:clip. For more information, please follow other related articles on the PHP Chinese website!