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>
css:
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),只有這樣才能實現溢出文本顯示省略號的效果