overflow:hidden不起作用？

今天在項目中，通過從後臺讀取數據生成的table中的tr和td時，由於有些td內容太多了，需要對其進行overflow:hidden的設置。但是在經過幾番努力和嘗試之後始終不可以。在進行了搜索之後才明白了。

我們知道，overflow屬性值有這幾種：
visible：聲明內容不會被剪裁。比如內容可能被渲染到容器外面。
hidden：聲明內容將被剪裁，並且也甭想使用滾動條來查看剪裁掉的內容。
scroll：聲明內容將被剪裁，但有可能出現滾動條來查看被剪裁掉的內容。滾動條出現的位置在inner border adge和outer padding adge之間。
auto：聲明決策將依賴於客戶端，優先使用scroll。

W3C標準中指明：
通常一個盒子的內容是被限制在盒子邊界之內的。但有時也會產生溢出，即部分或全部內容跑到盒子邊界之外。溢出將在滿足下列條件之一時出現：
1. 一個不換行的行元素寬度超出了容器盒子寬度。
2. 一個寬度固定的塊元素放在了比它窄的容器盒子內。
3. 一個元素的高度超出了容器盒子的高度。
4. 一個子孫元素，由負邊距值引起的部分內容在盒子外部。
5. text-indent屬性引起的行內元素在盒子的左右邊界外。
6. 一個絕對定位的子孫元素，部分內容在盒子外。但超出的部分不是總會被剪裁。子孫元素的內容就不會被子孫元素和其包含塊之間的祖先元素的overflow的設置所剪裁。

當溢出發生時，overflow屬性約定了容器盒子是否剪裁掉超出其內邊界的部分，並且決定是否出現滾動條來訪問被剪裁掉的內容。它會影響到元素所 有內容的剪裁，但有個例外情況，即上面第6條所提到的：元素的子孫元素的包含塊（Containing blocks）是整個視窗（viewport）或是該元素的祖先元素，內容將不會被剪裁。包含塊是什麼呢？簡單的說，就是可以決定一個元素位置和大小的塊。
通常一個元素的包含塊由離它最近的塊級祖先元素的內容邊界決定。但當元素被設置成絕對定位時，包含塊由最近的position不是static的祖先元素決定。

    html片段:
<div class=”ocean”> 
    <div class=”land”> 
        <p class=”joke”> 
                Mrs. Smith couldn’t get her husband to exercise. 
                She asked Mrs. Jones what she should do. Jones replied, 
                ”Tape the remote control between his toes.” 
        </p> 
    </div> 
</div>
style:
div.ocean{ 
    position:relative; 
    background-color:blue; 
    width:120px; 
    height:120px; 
    } 
div.land{ 
    width:100px; 
    height:100px; 
    background-color:red; 
    overflow:hidden; 
    } 
p.joke{ 
    width:150px; 
    height:110px; 
    margin-top:30px; 
    margin-left:30px; 
    background-color:yellow; 
    }

上面的代碼講述的是這樣一個故事：藍色的海洋裏有塊紅色的大地，紅色大地內有個黃色的段子。由於段子樣式的設置，它的部分內容超出了紅色大地。爲避免黃色 段子污染到藍色海洋，紅色大地警惕的爲自己設置了overflow:hidden;這樣超出大地的黃色部分就被剪掉了，我們看到的將是這樣一派和諧景象， 如圖1：

圖1：和諧的星球

如果事物都是這樣有理有序，天下可不就太平了。沒多久，黃色段子覺得憑自己的顯赫身份不該受紅色大地的控制，於是絞盡腦汁將自己變改成了絕對定位，一下子就擺脫了大地的束縛，如圖2：

p.joke{
position:absolute;
width:150px;
height:110px;
top:30px;
left:30px;
background-color:yellow;
}

圖2：猖獗的段子

爲什麼會這樣呢？這便是創造了上面提到過的第6個條件。當黃色段子變成position:absolute時，它的包含塊已由原來的紅色大地的內容邊界升 級到了離它最近的position不是static的藍色海洋了。而海洋此刻對此還一無所知呢，自身沒有設置overflow:hidden屬性，導致黃 色段子本該被裁剪的部分全部可見，不僅污染到海洋，還影響到整個星球，情況萬分火急啊。即使這時海洋設置上overflow:hidden，也只能將超出 藍色海洋的黃色部分剪裁，就像圖3，海洋此時是手足無措啊。

圖3：無辜的海洋

俗語說的好，魔高一尺道高一丈，解鈴還須繫鈴人。紅色大地怎就甘心段子跑出去呢。怎麼說大地終歸是段子的祖先元素，怎麼能甘心由着段子胡作非爲呢。於是， 大地歷盡千辛，尋得祕籍，在自己的樣式中添加position:relative屬性，將段子的包含塊又改成了大地來決定。這下段子就乖乖的被關起來了。 星球看起來又回到了最初的狀態。

div.ocean{ 
    position:relative; 
    background-color:blue; 
    width:120px; 
    height:120px; 
    } 
div.land{ 
    position:relative; 
    width:100px; 
    height:100px; 
    background-color:red; 
    overflow:hidden; 
    } 
p.joke{ 
    position:absolute; 
    width:150px; 
    height:110px; 
    top:30px; 
    left:30px; 
    background-color:yellow; 
    }

所以說，hidden並沒有失效，而是有可能我們遇到的情況恰好滿足了第6個條件，使得元素的包含塊發生了變化。上面的故事中，也提到了在遇到‘hidden’失效的情況時，可以根據需要來改變元素的包含塊來達到正義的目的。

這樣的解決思路是沒有問題的，但是對於我的來說卻還是沒有什麼效果；①。其實td設置overflow：hidden是沒有效果的。

②。每次的td的position爲absolute，就相當於重新定位，我的數據還是動態獲取的，所以使用的position會使所有的數據都疊加在第一個數據區域。

所以如果我的問題按照上述解決思路來的話，就相當於只是將所有數據都重疊在了一起，並沒有好到哪去。

所以在經過反覆琢磨之後，td內加一個span元素。使其相對定位，並且overflow：hidden；並設置寬度和高度。

.table tbody tr .span_1,
.table tbody tr .span_2,
.table tbody tr .span_3{
    position: relative;
    height: 150px;
    overflow: hidden;
    margin-top: 10px;
}

.table tbody tr .span_1:hover,
.table tbody tr .span_2:hover,
.table tbody tr .span_3:hover{
    overflow: scroll;
}

::-webkit-scrollbar{width:4px;}
/*::-webkit-scrollbar-track{background-color:#ccc;}*/
::-webkit-scrollbar-thumb{background-color:#ccc;}
::-webkit-scrollbar-thumb:hover {background-color:#ccc}
::-webkit-scrollbar-thumb:active {background-color:#ccc}

前幾行代碼是加了span的td的處理，使其超出內容hidden。但當鼠標懸浮時，其顯示爲出現滾動條，這無疑是一個好辦法。最後的css樣式設置的是滾動條的樣式（只在webkit內核中有效），註釋掉的是底部的滾動條，在這裏我們只用到了側滾動條。

所以css的坑還是很多的，當你按照正常的思路來設置的樣式如果不起作用的話，不如多搜搜，就會發現有很多例外，對以後也是有幫助的。