css之overflow注意事項，分析效果沒有實現的緣由及解決

原文連接:https://www.cnblogs.com/Decmber/p/5251622.html

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的祖先元素決定。

<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>

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;這樣超出大地的黃色部分就被剪掉了，咱們看到的將是這樣一派和諧景象， 如圖:

若黃色區域設置絕對定位就會脫離文檔流，擺脫紅色區域的束縛。

css:

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

此時即便藍色區域設置了overflow：hidden也只能裁剪去掉超出藍色區域的部分。

此時只要給黃色區域加上position定位，讓黃色區域從新被困在紅色區域裏面就依舊實現overflow屬性了；position的絕對定位是相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

css:

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’失效的狀況時，能夠根據須要來改變元素的包含塊來達到正義的目的。

 

text-overflow :

text-overflow: clip|ellipsis|string;

text-overflow 只是用來講明文字溢出時用什麼方式顯示，要實現溢出時產生省略號的效果，還須定義文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果