overflow hidden 是我最近在做圖文排版時，突然“頓悟”的一個 CSS 技巧。它像一道隱形的門，默默守護著內(nèi)容不越界，也悄悄改變了我的排版審美。
Q：什么是 overflow hidden？
簡單說，它是 CSS 中控制元素溢出內(nèi)容顯示方式的一個屬性。當(dāng)設(shè)置為 hidden，超出容器邊界的內(nèi)容會被“裁掉”，不會影響布局，也不會出現(xiàn)滾動條——就像你把一盆花放在窗臺上，風(fēng)再大，花瓣也不會飛到隔壁鄰居家。
Q：為什么我以前沒用過它？
因為我總以為“內(nèi)容溢出”是設(shè)計缺陷。直到有一次，我在小紅書發(fā)了一張九宮格圖，中間那張圖因為尺寸不對，被拉伸得變形還蓋住了文字。我試了各種 margin、padding 調(diào)整，都沒解決。后來朋友提醒我：“試試加個 overflow: hidden？” 我一試，瞬間清爽！原來不是圖的問題，是容器沒“兜住”它。
Q：它適合什么場景？
我最常用的是：
卡片式設(shè)計（比如筆記封面）——防止圖片比例不一致導(dǎo)致錯位；
文字容器內(nèi)嵌圖片或視頻——避免內(nèi)容“跑偏”；
輪播圖組件——自動隱藏多余幻燈片，保持視覺統(tǒng)一。
舉個真實案例：我上周寫一篇關(guān)于“如何拍出高級感生活照”的筆記，用了三張不同比例的照片拼接成一張長圖。如果不加 overflow: hidden，第二張圖會從底部“探頭”出來，破壞整體構(gòu)圖。加了之后，它乖乖縮進盒子，整個畫面立刻干凈利落，讀者反饋：“這張圖好有呼吸感！”
Q：會不會誤傷內(nèi)容？
當(dāng)然！它是個“狠角色”。如果你的文本太長、圖片太大，它會直接剪掉——這反而成了我的創(chuàng)作靈感來源。比如我現(xiàn)在每篇圖文都會預(yù)留“安全邊距”，讓內(nèi)容剛好卡在邊界，既不過度填充，也不留白太多。這種“有限制的自由”，反而讓我更專注內(nèi)容本身。
現(xiàn)在，我把它當(dāng)成一種“克制美學(xué)”來用。不是所有內(nèi)容都值得被看見，有些邊界，恰恰是美的起點。
?? 小貼士：記得搭配 position: relative 或 display: flex 使用，效果更穩(wěn)定哦～
下次你看到朋友圈里那些“干凈得像濾鏡”的圖文，很可能就是用了 overflow: hidden 這個小魔法?
