JavaWeb學習之路(45)–CSS之溢出

1. 前言

之前我們講過了，網頁元素會占據一個盒子的空間。如果我們通過width或者height設定了元素的尺寸，那麼就确定了元素内容的大小。

如果此時，元素内容太多，超出了我們設定的尺寸，會是什麼情況呢。

這就是本節課介紹的溢出，指的就是内容太多，超出元素尺寸的情況。

CSS提供了overflow屬性設定溢出時元素的顯示方式。

2. 預設顯示溢出部分

如果我們不指定overflow，則overflow預設取值為visible，意思是溢出部分顯示出來。例如：

<div class="box overflow-visible">

       <h3>涼州詞</h3>

       黃河遠上白雲間<br>

       一片孤城萬仞山<br>

       羌笛何須怨楊柳<br>

       春風不度玉門關<br>

   </div>

對應CSS：

 .box {

           border: 1px solid blue;

           height: 100px;

       }

       .overflow-visible {

           overflow: visible;

我們通過.box類為元素設定了邊框和高度，通過.overflow-visible将元素溢出方式設定為visible，注意預設情況也是該溢出方式。此時效果如下：

可見溢出的部分也顯示了出來。

3. 隐藏溢出部分

通過将overflow屬性值設定為hidden，可以隐藏溢出部分。

<div class="box overflow-hidden">

CSS：

  .overflow-hidden {

           overflow: hidden;

效果如下：

4. 顯示滾動條

上面兩種方式的處理，明顯都不夠好。第一種内容都跑出來了，第二種直接不讓你看溢出的内容了。

我們可以通過将overflow屬性值設定為scroll，進而顯示滾動條以便檢視溢出内容。

<div class="box overflow-scroll">

CSS代碼：

 .overflow-scroll {

           overflow: scroll;

此時效果如下，拖動右側滾動條即可檢視溢出内容。

5. 自動處理

在上面的例子中，内容的寬度并未超過元素寬度，其實沒必要顯示橫向滾動條。此時可以直接将overflow設定為auto，讓浏覽器自動處理去。

 <div class="box overflow-auto">

  .overflow-auto {

           overflow: auto;

在IE浏覽器下，處理結果如下：

使用Chrome浏覽器看看，效果如下：

這兩種浏覽器都足夠智能，隻顯示了垂直滾動條，但是從樣式上看，好像Chrome浏覽器更好看一點。

6. 小結

綜合上面的執行個體，設定auto效果最好。