In diesem Artikel wird eine neue Funktion vorgestellt: Ab Chrome 90 gibt es eine neue Funktion: overflow: clip. Verwenden Sie diese, um die Überlaufrichtung einfach zu steuern. overflow: clip，使用它，轻松的对溢出方向进行控制。
首先，简单介绍下 overflow: clip 的用法。
overflow: clip: 与 overflow: hidden 的表现形式极为类似，也是对元素的 padding-box 进行裁剪。【学习视频分享：css视频教程、web前端】
但是，它们有两点不同：
也就是 overflow: clip 内部完全禁止任何形式的滚动。当然，这个不是今天的重点，暂且略过不谈。
MDN 原文：The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
overflow: clip 可以从 x，y 轴方向上对裁剪进行，控制，而 overflow: hidden 不行。
重点在于这一点。我们来简单示意一下：
我们来看对于不区分方向，overflow: clip 与 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;
}我们设置了 3 个 DIV 容器，其中一个不设置 overflow，另外两个分别设置 overflow: clip 与 overflow: hidden。效果如下：
此时，overflow: clip 与 overflow: hidden 的表现是一致的。
overflow: clip 在 x/y 轴上可单独设置然而，overflow: clip 的与众不同之处在于，它可以单独设置给 x 轴或者 y 轴，使得容器拥有某一个方向上的裁剪能力，而相对的另外一个方向，允许溢出。
看看这个 DEMO：
这里的现象值得注意：
单单设置 overflow-x: hidden 或者 overflow-y: hidden，表现形式都和 overflow: hidden 一致，是全方位的裁剪
而水平 x 或竖直 y 方向的 overflow-x: clip/ overflow-y: clip 配合另一个方向的 overflow-x: visible，却能够实现一个方向允许溢出，一个方向实现裁剪！
需要解释一下上面两点：
设置 overflow: hidden 就会创建 BFC，因此没法只限制一个方向；而 overflow: clip 不会创建 BFC，因此它们在很多表现上会产生不一致的现象（譬如）
overflow-x/y 设置为 hidden 时, overflow-y/x 会变成 auto, 即使设置为 visible
完整的 DEMO，你可以戳这里：CodePen Demo -- overflow: hidden & overflow: clip
至此，我们就实现了这样一种效果，允许元素在 x/y 方向上的单向裁剪，像是这样：
(上图允许 x 轴方向上的溢出，而 y 轴方向进行了裁剪)
OK，那么，如果再进一步。譬如有这么个需求，要求上、左、右方向允许溢出，而下方向需要裁剪，能做到么？
答案是可以的。
CSS 中其实还有多种方式可以进行元素的裁切，近似的实现类似于 overflow: hidden 的功能。
譬如，其中，我们可以使用 clip-path
overflow: clip vorstellen. , web front-end
overflow: clip: Die Ausdrucksform vonoverflow: verstecktist sehr ähnlich. Sie schneidet auch diepadding-boxdes Elements ab. [Teilen von Lernvideos: CSS-Video-Tutorial】
🎜Sie haben jedoch zwei Unterschiede:🎜🎜🎜MDN Originaltext: Der Unterschied zwischen Clip und Hidden besteht darin, dass das Clip-Schlüsselwort auch jegliches Scrollen, einschließlich programmatisches Scrollen, verbietet.🎜
- 🎜Das heißt,
overflow: clipverbietet intern jegliche Form des Scrollens vollständig. Natürlich steht dies heute nicht im Mittelpunkt, also lassen wir es vorerst überspringen. 🎜
overflow: clip kann das Ausschneiden aus der x- und y-Achsenrichtung steuern, overflow: versteckt jedoch nicht. 🎜overflow: clip und overflow: versteckt: 🎜rrreeerrreee🎜Wir haben drei DIV-Container eingerichtet, von denen einer keinen Überlauf setzt, und der Die anderen beiden setzen jeweils overflow: clip und overflow: versteckt. Der Effekt ist wie folgt: 🎜🎜 🎜🎜dieser Zeitpunkt verhält sich overflow: clip genauso wie overflow: versteckt. 🎜overflow: clip individuell auf der x/y-Achse einstellbar h3 >🎜Der Unterschied zu overflow: clip besteht jedoch darin, dass es separat auf die x-Achse oder die y-Achse eingestellt werden kann, sodass der Container in eine bestimmte Richtung abgeschnitten werden kann. aber in die entgegengesetzte Richtung, was einen Überlauf ermöglicht. 🎜🎜Schauen Sie sich diese DEMO an: 🎜🎜🎜🎜Das Phänomen hier ist erwähnenswert: 🎜overflow-x: versteckt oder overflow- y: versteckt, der Ausdruck stimmt mit overflow: versteckt überein, was ein Allround-Zuschneiden 🎜Überlauf in der horizontalen x- oder vertikalen Richtung ist y-Richtung -x: Clip/ overflow-y: clip in Kombination mit overflow-x: sichtbar in einer anderen Richtung kann einen Überlauf in eine Richtung ermöglichen und einen Überlauf nach innen bewirken die andere Richtung. 🎜overflow: versteckt und es wird BFC erstellt, Sie können es also nicht auf nur eine Richtung beschränken, und overflow: clip erstellt kein BFC, sodass sie (zum Beispiel) in vielen Aufführungen inkonsistente Phänomene erzeugen 🎜 li>
🎜🎜(Das obige Bild ermöglicht einen Überlauf in der x-Achsenrichtung und die y-Achsenrichtung ist beschnitten)🎜overflow: versteckt. 🎜🎜Zum Beispiel können wir clip-path verwenden, um eine unidirektionale Beschneidung von oben, unten, links und rechts zu erreichen. Dies ist der Inhalt meines vorherigen Artikels – 🎜So implementieren Sie Overflow: Hidden🎜, ohne Overflow: Hidden zu verwenden. Wenn Sie interessiert sind, können Sie einen Blick darauf werfen. 🎜🎜🎜Ursprüngliche Adresse: https://www.cnblogs.com/coco1s/p/16627152.html🎜🎜Autor: ChokCoco🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !
Das obige ist der detaillierte Inhalt vonLernen Sie neue CSS-Funktionen kennen: Directional Clipping overflow:clip. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
