You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p></div><divclass="hidden"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p></div><divclass="clip"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p></div>
本文将介绍一个新特性,从 Chrome 90 开始,overflow 新增的一个新特性 --
overflow: clip
,使用它,轻松的对溢出方向进行控制。overflow: clip 为何
首先,简单介绍下
overflow: clip
的用法。overflow: clip
: 与overflow: hidden
的表现形式极为类似,也是对元素的padding-box
进行裁剪。但是,它们有两点不同:
overflow: clip
内部完全禁止任何形式的滚动。当然,这个不是今天的重点,暂且略过不谈。overflow: clip
可以从 x,y 轴方向上对裁剪进行,控制,而overflow: hidden
不行。重点在于这一点。我们来简单示意一下:
overflow: clip && overflow: hidden 的表现
我们来看对于不区分方向,
overflow: clip
与overflow: hidden
的表现形式:我们设置了 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
一致,是全方位的裁剪overflow-x: clip
/overflow-y: clip
配合另一个方向的overflow-x: visible
,却能够实现一个方向允许溢出,一个方向实现裁剪!需要解释一下上面两点:
overflow: hidden
就会创建 BFC,因此没法只限制一个方向;而overflow: clip
不会创建 BFC,因此它们在很多表现上会产生不一致的现象(譬如)完整的 DEMO,你可以戳这里:CodePen Demo -- overflow: hidden & overflow: clip
至此,我们就实现了这样一种效果,允许元素在 x/y 方向上的单向裁剪,像是这样:
(上图允许 x 轴方向上的溢出,而 y 轴方向进行了裁剪)
上、下、左、右单个方向上的裁剪
OK,那么,如果再进一步。譬如有这么个需求,要求上、左、右方向允许溢出,而下方向需要裁剪,能做到么?
答案是可以的。
CSS 中其实还有多种方式可以进行元素的裁切,近似的实现类似于
overflow: hidden
的功能。譬如,其中,我们可以使用
clip-path
实现上、下、左、右 单一方向的裁剪。这是我之前一篇文章的内容 -- 如何不使用 overflow: hidden 实现 overflow: hidden,感兴趣可以看看。最后
好了,本文到此结束,今天是一个非常小的技巧,希望对你有帮助 :),想 Get 到最有意思的 CSS 资讯,千万不要错过我的 iCSS 公众号 😄
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
The text was updated successfully, but these errors were encountered: