乐趣区

关于前端:有意思的方向裁切-overflow-clip

jiezi

本文将介绍一个新个性，从 Chrome 90 开始，overflow 新增的一个新个性 — overflow: clip，应用它，轻松的对溢出方向进行管制。

overflow: clip 为何

首先，简略介绍下 overflow: clip 的用法。

overflow: clip: 与 overflow: hidden 的表现形式极为相似，也是对元素的 padding-box 进行裁剪。

然而，它们有两点不同：

  1. 也就是 overflow: clip 外部齐全禁止任何模式的滚动。当然，这个不是明天的重点，暂且略过不谈。

MDN 原文：The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.

  1. overflow: clip 能够从 x，y 轴方向上对裁剪进行，管制，而 overflow: hidden 不行。

重点在于这一点。咱们来简略示意一下：

overflow: clip && 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：

这里的景象值得注意：

  1. 单单设置 overflow-x: hidden 或者 overflow-y: hidden，表现形式都和 overflow: hidden 统一，是全方位的裁剪
  2. 而程度 x 或竖直 y 方向的 overflow-x: clip/ overflow-y: clip 配合另一个方向的 overflow-x: visible，却可能实现一个方向容许溢出，一个方向实现裁剪！

残缺的 DEMO，你能够戳这里：CodePen Demo — overflow: hidden & overflow: clip

至此，咱们就实现了这样一种成果，容许元素在 x/y 方向上的单向裁剪，像是这样：

(上图容许 x 轴方向上的溢出，而 y 轴方向进行了裁剪)

上、下、左、右单个方向上的裁剪

OK，那么，如果再进一步。譬如有这么个需要，要求上、左、右方向容许溢出，而下方向须要裁剪，能做到么？

答案是能够的。

CSS 中其实还有多种形式能够进行元素的裁切，近似的实现相似于 overflow: hidden 的性能。

譬如，其中，咱们能够应用 clip-path 实现上、下、左、右 繁多方向的裁剪。这是我之前一篇文章的内容 — 如何不应用 overflow: hidden 实现 overflow: hidden，感兴趣能够看看。

最初

好了，本文到此结束，明天是一个十分小的技巧，心愿对你有帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版