本文將介紹一個新特性，從 Chrome 90 開始，overflow 新增的一個新特性 -- overflow: clip，使用它，輕松的對溢位方向進行控制，
overflow: clip 為何
首先，簡單介紹下 overflow: clip 的用法，
overflow: clip: 與 overflow: hidden 的表現形式極為類似，也是對元素的 padding-box 進行裁剪，
但是，它們有兩點不同：
- 也就是
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 的表現
我們來看對于不區分方向，overflow: clip 與 overflow: hidden 的表現形式：
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div >
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div >
<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，卻能夠實作一個方向允許溢位，一個方向實作裁剪！
完整的 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 訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502808.html
標籤：Html/Css
上一篇：vue+node跨域解決方案