CSS中，當一個元素的內容太大而無法容納時，我們可以對其進行控制。該元素的屬性是overflow，它是overflow-x和overflow-y屬性的簡寫形式。

在本文中，將會介紹這些屬性，然后我們將一起深入討論與overflow相關的一些概念和用例。你準備好了嗎？get it!

簡介

要使用overflow屬性，我們需要確保將其應用到的元素具有以下特征：

• 塊級元素(例如:div、section)，通過height或max-height設置高度。通過設置高度，我的意思是項目應該有內容(不是空的)，也不是添加一個顯式的高度。
• 或將white-space設置為nowrap 的元素

Overflow 有哪些值

overflow屬性可以有如下屬性：

?

visible, hidden, scroll, auto

?

.element {
    height: 200px;
    overflow: [overflow-x] [overflow-y];
}

由于overflow是一種簡寫屬性，因此它可以接受一個或兩個值。第一個值用于水平軸，第二個值用于垂直軸。

Visible

overflow 默認值為 visible，其中的內容可以超出其父值。可以這樣設置:

.element {
    height: 200px;
    overflow: visible;
}

有趣的一面是，當一個軸設置為visible，而另一軸設置為auto時，visible的軸將計算為auto。

[MDN][2] 上這樣說到：

?

注意: 設置一個軸為visible（默認值），同時設置另一個軸為不同的值，會導致設置visible的軸的行為會變成auto`。

?

例如，如果我們用以下內容設置一個元素:

.element {
    height: 200px;
    overflow: visible auto;
}

overflow屬性的計算值將為auto auto。

Hidden

當內容比其父內容長時，它將被剪切。但是，可以使用 Javascript 滾動內容。

Scroll

在上圖中，無論內容是否長，滾動條總是可見的。注意，這取決于操作系統。

Auto

auto這是一個聰明的關鍵字，僅當內容比其容器長時才顯示滾動條。

注意，在圖中，只有當內容比其容器長時，滾動條才可見。接下來，我們將討論與overflow相關的longhand屬性

Overflow-X

該家伙負責x軸或元素的水平邊。

Overflow-Y

該家伙負責y軸或元素的垂直邊。

用例和事例

簡單滑塊

我們可以通過水平裁剪內容并使其滾動來創建快速簡單的滑塊。

在上面的模型中，我們有水平放置的卡片，還有一個滾動條，可以滾動并顯示更多內容。為此，我們需要執行以下操作：

• 將卡片顯示在同一行，為此使用flexbox
• 向容器中添加overflow-x

.wrapper {
    display: flex;
    overflow-x: auto;
}

它可以在桌面瀏覽器上工作。然而，在Safari上對iOS(12.4.1)進行測試時，滾動并沒有起作用。經過反復試驗，當我為子項添加寬度時，滾動起作用了，在iOS(13.3)上運行就沒有問題啦。

事例源碼：https://codepen.io/shadeed/pen/bfb886326f2066b6ae0a8b641ecf68b4?editors=1100

模態框內容

當模態內容太長時，我們可以很容易地使區域可滾動。要做到這一點，我們應該做到以下幾點

• 設置模態框的最大高度
• 模態框 body 應占用全部可用空間

.modal {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    max-width: 450px;
}

/* 1. 讓模態框 body 占據剩余的可用空間 */
/* 2. 如果內容很長，則允許滾動。我使用`auto`是因為它在內容足夠長之前不會顯示滾動條 */
.modal__content {
    flex-grow: 1; /* [1] */
    overflow-y: auto; /* [1] */
}

事例源碼：https://codepen.io/shadeed/pen/1997908941279f0af3d6c7f83d6efdc8?editors=0100

帶有圓角的卡片

當我們有一張卡并且希望其角是圓的時，我們傾向于為頂部和底部的角添加border-radius，如下所示：

.card-image {
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
}

.card-content {
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}

這可能需要很多工作，特別是如果卡片在移動設備上具有不同的設計。例如，它們不會彼此堆疊，而不是堆疊其子項。

在這種情況下，最好使overflow: hidden將其隱藏在包裝器上，然后向其添加border-radius，這樣我們只需要設置一個地方就行了。如下所示：

.card {
    overflow: hidden;
    border-radius: 7px;
}

動畫

當涉及動畫時，overflow: hidden的好處是：在剪輯時可以懸停顯示的隱藏元素上。考慮下圖：

在CSS中，如下所示：

.button.slide-left {
    overflow: hidden;
}

.button.slide-left:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.25;
    border-radius: 100px;
    transform: translateX(-100%);
    transition: 0.2s ease-in;
}

我們有兩個按鈕，每個按鈕都有一個偽元素，該元素相應地過渡到左側和底部。如下所示：

事例源碼：https://codepen.io/shadeed/pen/7b48418837470e173f7a6cd7bcc4a403?editors=0100

Overflow的常見問題：在手機上滾動

例如，當我們有一個滑動條時，僅僅添加overflow-x是不夠的。在「Chrome iOS」上，我們需要手動滾動和移動內容。看下面的動圖：

幸運的是，有一個屬性可以增強滾動體驗。

.wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

這稱為「基于動量的滾動」。根據MDN：

「-webkit-overflow-scrolling」 屬性控制元素在移動設備上是否使用滾動回彈效果。它有兩個值：

「auto」：使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。「touch」：使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

下圖是使用基于動量的滾動的效果。

內聯塊元素

根據CSS規范：

?

將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈在同一行內，允許空格。(準確地說，應用此特性的元素呈現為內聯對象，周圍元素保持在同一行，但可以設置寬度和高度塊元素的屬性)

?

當一個inline-block元素的overflow值不是visible的時，這將導致該元素的底邊根據其同級元素的文本基線對齊。

要解決該問題，我們可以主按鈕添加overflow: hidden，并更改其對齊方式：

.button {
    vertical-align: top;
}

事例源碼：https://codepen.io/shadeed/pen/291fda2293ed737f7eb7dc74a9318438?editors=1100

水平滾動問題

通常，我們會遇到水平滾動的問題，當原因未知時，滾動滾動會變得更加困難。在本節中，我將列出水平滾動的一些常見原因，以便大家以后在構建布局時可以想到到它們。

position 是 absolutely/fixed 元素

當元素的position值為absolute或fixed值時，就有可能導致水平滾動。當left，right值中的一個將元素定位在body元素外部時，可能會發生這種情況

要解決這個問題，首先需要檢查為什么這個元素被放置在viewport之外。如果沒有必要，則必須刪除它或編輯position值。

grid 項目

CSS 網格有三種情況可以導致水平滾動，來看看它們。

「對列使用像素值」

當使用像素值時，這將在視口寬度較小時引起問題。見下文：

.wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 1rem;
}

解決方案是重置列，只在有足夠空間的視口上使用上面的列。

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 400px) {
    grid-template-columns: 200px 1fr;
}

使用 minmax()

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
}

可能會遺忘要針對移動設備進行測試，因為最小寬度為300px，這將導致在某個點進行水平滾動。

一個簡單的解決方法是將grid-template-columns重置為1fr，并在視口較大時對其進行更改。

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 400px) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

源碼地址：https://codepen.io/shadeed/pen/a874bf85a1acf2ee6f37a7f1d86ad3b2?editors=1100

長詞或鏈接

處理內容中的長字或鏈接時，它應該換行，否則，將會出現水平滾動。

為了解決這個問題，我們需要中斷長單詞和鏈接。我們可以這樣做

.post-content a {
    word-wrap: break-word;
}

或者我們可以使用text-overflow：

.post-content a {
    overflow: hidden;
    text-overflow: ellipsis;
}

如何調試水平滾動問題

既然我們已經知道了水平滾動的原因，我將介紹一些方法來幫助我們識別這些問題并解決它們。

使用 CSS outline

*, *:before, *:after {
    outline: solid 1px #000;
}

通過添加這些內容，我們可以注意到哪些元素的寬度較大，因此我們可以解決問題。阿迪·奧斯曼尼（Addy Osmani）用他的簡單腳本進一步完善了這一點：

[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

該腳本的作用是使輪廓顏色隨機化，而不是使所有輪廓都具有單一顏色，這將使其變得更容易。

Firefox scroll標簽

在Firefox中，會向導致水平滾動的元素添加一個小標簽。

刪除元素

有時，上述技術無效。在這種情況下，我要做的是打開DevTools，然后開始刪除元素并注意。一旦水平滾動消失了，我就可以確定引起問題的元素。

最后一個解決方案:使用overflow-x: hidden

最后，可以使用overflow-x：hidden解決水平滾動問題，但這一般是最后沒辦法的備用方案。

作者：Ahmad shaded 譯者：前端小智 來源：sitepoint

原文：https://ishadeorddeed.com/article/overflow-css/

嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

第二階段 CSS3

17 CSS溢出文字隱藏

所謂的界面樣式，就是更改一些用戶操作樣式，比如更改用戶的鼠標樣式，表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了，防止表單域拖拽。

1 鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。

cursor:default小白

pointer小手

move移動

text文本

盡量不要用hand因為火狐不支持

pointer ie6以上都支持的盡量用

2 輪廓線outline

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

但是我們都不關心可以設置多少，我們平時都是去掉的。

最直接的寫法是：outline：0；或者 outline:none；

3 防止拖拽文本域resize

resize:none這個單詞可以防止火狐谷歌等瀏覽器隨意的拖動文本域。

4 行內塊和文字對齊

Vertical-align垂直對齊

以前我們講過讓帶有寬度的塊級元素居中對齊，是 margin：0 auto;

以前我們還講過讓文字居中對齊，是 text-align:center；

但是我們從來沒有講過有垂直居中的屬性，我們的媽媽一直很擔心我們的垂直居中怎么做。

vertical-algn垂直對齊，這個看上去很美好的一個屬性，實際有著不可捉摸的脾氣，否則我們也不會這么晚來講解。

vertical-align ：baseline、top 、 middle 、 bottom

設置或檢索對象內容的垂直對齊方式。

vertical-align不影響塊級元素中的內容對齊，它只針對于行內元素或者行內塊元素，特別是行內塊元素，通常用來控制圖片/表單與文字的對齊

所以我們知道，我們可以通過 vertical-align控制圖片和文字的垂直關系了。默認的圖片會和文字基線對齊。

5 去除圖片底側縫隙

有個很重要特性你要記住：圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。這樣會造成一個問題，就是圖片底側會有一個空白縫隙。

解決的方法就是：

1 給 img添加vertical-align:middle / top等等。讓圖片不要和基線對齊。

2 給img添加 display:bock;轉換為塊級元素就不會存在問題了。

6 word-break 自動換行

normal使用瀏覽器默認的換行規則。

break-all允許在單詞內換行。

keep-all只能在半角空格或連字符處換行。

主要處理英文單詞

7 white-space

設置或檢索對象內文本顯示方式。通常我們使用于強制一行顯示內容

normal：默認處理方式

nowrap：強制在同一行內顯示所有文本，直到文本結束或者遭遇br標簽對象才換行。

8 超出的部分省略號顯示

text-overflow文字溢出

text -overflow:clip / ellipsis

設置或檢索是否使用一個省略標記（…）標示對象內文本的溢出

clip：不顯示省略標記（…），而是簡單的裁切

ellipsis：當對象內文本溢出時顯示省略標記（…）

注意:一定要首先強制一行內顯示，再次和 overflow屬性搭配使用?

看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

本章已結束，下篇文章將分享《18 CSS精靈技術》小伙伴們不要錯過喲！