?本文將介紹一個(gè)新特性，從 Chrome 90 開始，overflow 新增的一個(gè)新特性 -- overflow: clip，使用它，輕松地對(duì)溢出方向進(jìn)行控制。

overflow: clip 為何

首先，簡(jiǎn)單介紹下 overflow: clip 的用法。

overflow: clip: 與 overflow: hidden 的表現(xiàn)形式極為類似，也是對(duì)元素的 padding-box 進(jìn)行裁剪。

但是，它們有兩點(diǎn)不同：

1. 也就是overflow: clip 內(nèi)部完全禁止任何形式的滾動(dòng)。當(dāng)然，這個(gè)不是今天的重點(diǎn)，暫且略過不談。

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

2. overflow: clip 可以從 x，y 軸方向上對(duì)裁剪進(jìn)行，控制，而overflow: hidden 不行。

重點(diǎn)在于這一點(diǎn)。我們來簡(jiǎn)單示意一下：

overflow: clip && overflow: hidden 的表現(xiàn)

我們來看對(duì)于不區(qū)分方向，overflow: clip 與 overflow: hidden 的表現(xiàn)形式：

<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;
}

我們?cè)O(shè)置了 3 個(gè) DIV 容器，其中一個(gè)不設(shè)置 overflow，另外兩個(gè)分別設(shè)置 overflow: clip 與 overflow: hidden。效果如下：

此時(shí)，overflow: clip 與 overflow: hidden 的表現(xiàn)是一致的。

overflow: clip 在 x/y 軸上可單獨(dú)設(shè)置

然而，overflow: clip 的與眾不同之處在于，它可以單獨(dú)設(shè)置給 x 軸或者 y 軸，使得容器擁有某一個(gè)方向上的裁剪能力，而相對(duì)的另外一個(gè)方向，允許溢出。

看看這個(gè) DEMO：

這里的現(xiàn)象值得注意：

1. 單單設(shè)置overflow-x: hidden 或者overflow-y: hidden，表現(xiàn)形式都和overflow: hidden 一致，是全方位的裁剪。
2. 而水平 x 或豎直 y 方向的overflow-x: clip/overflow-y: clip 配合另一個(gè)方向的overflow-x: visible，卻能夠?qū)崿F(xiàn)一個(gè)方向允許溢出，一個(gè)方向?qū)崿F(xiàn)裁剪！

至此，我們就實(shí)現(xiàn)了這樣一種效果，允許元素在 x/y 方向上的單向裁剪，像是這樣：

(上圖允許 x 軸方向上的溢出，而 y 軸方向進(jìn)行了裁剪)。

上、下、左、右單個(gè)方向上的裁剪

OK，那么，如果再進(jìn)一步。譬如有這么個(gè)需求，要求上、左、右方向允許溢出，而下方向需要裁剪，能做到么？

答案是可以的。

CSS 中其實(shí)還有多種方式可以進(jìn)行元素的裁切，近似的實(shí)現(xiàn)類似于 overflow: hidden 的功能。

譬如，其中，我們可以使用 clip-path 實(shí)現(xiàn)上、下、左、右 單一方向的裁剪。

最后

好了，本文到此結(jié)束，今天是一個(gè)非常小的技巧，希望對(duì)你有幫助 :)

參考資料

[1]CodePen Demo -- overflow: hidden & overflow: clip: https://codepen.io/Chokcoco/pen/LYdgvxm。

[2]如何不使用 overflow: hidden 實(shí)現(xiàn) overflow: hidden: https://github.com/chokcoco/iCSS/issues/90。

[3]Github -- iCSS: https://github.com/chokcoco/iCSS。