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

39次阅读

共计 1633 个字符,预计需要花费 5 分钟才能阅读完成。

本文将介绍一个新个性,从 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: clipoverflow: 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: clipoverflow: hidden。成果如下:

此时,overflow: clipoverflow: 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 订阅珍藏。

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

正文完
 0