們先來看個例子，這個容器里有兩段文字和一張圖片，由于容器的高度小于包含內(nèi)容的總高度，不能顯示全部的內(nèi)容。此時，我們可以通過鼠標滾輪使容器的內(nèi)容上下滾動，來查看全貌。

這個效果是如何實現(xiàn)的呢？你一定想到的是 iframe！實際上，通過CSS的溢出樣式也能實現(xiàn)這個功能。

CSS 的 overflow 屬性，指定了當一個元素的內(nèi)容太大，無法容納在指定區(qū)域時，是否要裁剪內(nèi)容或添加滾動條。overflow 屬性有以下值：

visible - 默認。溢出的內(nèi)容沒有被剪掉。內(nèi)容會在元素的框外呈現(xiàn)。

hidden - 溢出的內(nèi)容被剪切，其余的內(nèi)容將不可見。

scroll - 溢出的內(nèi)容被剪掉了，并且增加了一個滾動條來查看其余的內(nèi)容。

auto - 類似于 scroll，但它只在必要時添加滾動條。

這是我已經(jīng)制作好的一個頁面。div 容器里包含三個段落，分別放置的是兩段文本和一張圖片。容器設(shè)置了背景顏色、內(nèi)填充和邊框。

在瀏覽器里預(yù)覽，內(nèi)容撐滿整個容器，全部顯示出來了。

接下來給外部的 div 容器添加 width: 50%、height: 300px 的樣式。

HTML
<div id="overflowTest">
    <p>
      國外某公司呢開發(fā)了一款自動找bug的AI程序，但是這個程序“悟道”了！AI“悟道”后解決bug的終極方案就是：沒有代碼就沒有bug，全刪！這是一個發(fā)生在美國的真實事件，美國版的大眾點評，本來想訓(xùn)練AI來消除bug，結(jié)果它把所有的內(nèi)容全部刪除了。來看看 軟件的更新介紹：
    </p>
    <p>
      <img src="./image.jpeg" alt="" width="600">
    </p>
    <p>
      大概意思就是：我們?yōu)楸局苁褂迷揳pp遇到問題的用戶致歉，我們訓(xùn)練了一個神經(jīng)網(wǎng)絡(luò)，來消愁該app的漏洞，但它刪除了一切。還好這事發(fā)生在國外，要是在國內(nèi)的互聯(lián)網(wǎng)公司，這么大的安全事故，又要有一個工程師“祭天”了。
    </p>
  </div>

CSS
#overflowTest {
  background: #4CAF50;
  padding: 15px;
  border: 1px solid #ccc;
}

我們看，容器的高度雖然小于內(nèi)容的總體高度，但是容器里的內(nèi)容還是全部顯示了。這說明瀏覽器在默認情況下， 對容器溢出的部分是完全顯示的。

回到 css 代碼，給 div 容器再添加樣式 overflow: visible。

效果是一樣的，說明 visible 是 overflow 屬性的默認值。

如果希望把溢出的部分隱藏，需要將 overflow 的值設(shè)置為 hidden（注意這個單詞讀 [?h?dn]）。

果然，溢出的部分隱藏了，此時是無法看到隱藏的內(nèi)容的。

如果希望通過滾動條查看隱藏的內(nèi)容，需要將 overflow 的值設(shè)置為 scroll。

這樣，就可以通過滾動條來查看全部內(nèi)容了！

當然，也可以把 overflow 的值設(shè)置為 auto，此時和 scroll 效果一樣。

回到 css 代碼，我們將 div 容器的 width 修改為 30%。

看效果，水平和垂直方向都可以滾動了。

如果只希望某一個方向滾動，可以采用 overflow-x 和 overflow-y 兩個樣式屬性，它們指定是否只在水平方向或垂直方向上滾動。

比如，注釋掉 overflow: scroll ，添加樣式 overflow-y: scroll。

我們看，此時垂直方向可以滾動，可是水平方向也可以滾動，說明 overflow-y 只能約束垂直方向。

再添加樣式 overflow-x: hidden。

這回，水平方向就不能滾動了，只有垂直方向可以滾動！

有時，文字標題或文字內(nèi)容所在的容器空間有限，不能顯示全部內(nèi)容的時候，會出現(xiàn)一個省略號，示意讀者：內(nèi)容顯示不全，可以點擊查看詳細內(nèi)容。這個效果如何實現(xiàn)呢？

在 body 里添加一個 h1 元素，填入一些內(nèi)容。

在 css 文件里，定義選擇器 h1，聲明樣式 width: 310px，overflow: hidden，white-space: nowrap。讓文本在一行上顯示，并且溢出的部分隱藏。

很顯然，此時的效果用戶體驗不好——文字被剪切了。

回到 css 代碼，給 h1 再添加一個 text-overflow: ellipsis 樣式。ei 累鋪賽司

我們再看，效果實現(xiàn)了！