CSS屬性探秘系列(二):overflow及相關(guān)屬性text-overflow

一、overflow
指定盒中容納不下的內(nèi)容的顯示方法。
1.適用范圍:塊級元素
2.可取值:
visible:不剪切內(nèi)容(默認(rèn))。
hidden: 將超出對象尺寸的內(nèi)容進(jìn)行裁剪,將不出現(xiàn)滾動條。
scroll: 將超出對象尺寸的內(nèi)容進(jìn)行裁剪,并以滾動條的方式顯示超出的內(nèi)容。
auto: 在需要時裁剪內(nèi)容并添加滾動條,此為body對象和textarea的默認(rèn)值。
3.說明:
對于table來說,假如table-layout屬性設(shè)置為fixed,則td對象支持帶有默認(rèn)值為hidden的overflow屬性。如果設(shè)為hidden,scroll或者auto,那么超出td尺寸的內(nèi)容將被剪切。如果設(shè)為visible,將導(dǎo)致額外的文本溢出到右邊或左邊(視direction屬性設(shè)置而定)的單元格。
二、相關(guān)屬性:
1.overflow-x:
overflow在水平方向上
2.overflow-y:
overflow在垂直方向上
3.text-overflow:
水平方向上,指定文字溢出時的顯示方式,對于省略標(biāo)記出現(xiàn)哪一側(cè)由文字方向決定
1)可取值:
clip:文本溢出時不顯示省略標(biāo)記(…),將溢出的部分裁切掉
ellipsis:文本溢出時顯示省略標(biāo)記(…)
字符串:任何字符串(FF支持)
2)使用前提:
塊級元素
設(shè)置寬度(不設(shè)置以瀏覽器窗口寬度為準(zhǔn))
overflow:hidden;//溢出隱藏
white-space:nowrap;//禁止換行
3)說明:
a.當(dāng)對容器設(shè)置浮動或者定位時,必須對容器設(shè)置寬度才能出現(xiàn)省略號
b.對于Firefox瀏覽器,可以給text-overflow設(shè)置溢出時顯示任意字符串來替換省略號,如text-overflow:”&&&”。
相關(guān)文章
- 當(dāng)塊元素想呈現(xiàn)該元素內(nèi)部內(nèi)容不換行或者超過該元素的部分隱藏起來2010-03-05
標(biāo)題長度溢出時,自動顯示為省略“...”的Css text-overflow
內(nèi)容超出后自動隱藏并加省略標(biāo)記(...)引號的Css text-overflow:ellipsis; o...2011-07-27css overflow與text-indent:-999em 字體隱藏
css overflow與text-indent:-999em 字體隱藏,需要的朋友可以參考下。2010-03-18CSS:用overflow代替left截取指定長度字符串-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)
為了防止文章標(biāo)題過長超過容器(td,div)寬度而顯示成多行,我們通常要對標(biāo)題進(jìn)行處理讓其顯示在一行,通常使用的方法有兩種:一種方法是在客戶端用CSS設(shè)置容器的overflow屬2008-10-17CSS教程:導(dǎo)致一些問題的overflow-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
overflow有問題嗎?沒問題。那為什么說要慎用呢?因?yàn)橛袝r會導(dǎo)致一些問題。。。 關(guān)于overflow:auto的,很多人貪他書寫方便,直接用來清除浮動。但是Firefox使用overflow:au2008-10-17css overflow溢出隱藏(文字溢出時的自動隱藏處理)
css溢出隱藏一般用于當(dāng)內(nèi)容太大以至于無法適應(yīng)指定的區(qū)域時,通過設(shè)置css下的overflow屬性來隱藏其內(nèi)容2013-03-07標(biāo)簽增加CSS的overflow屬性來清除浮動-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
這個方法不單使用簡單,而且FF、OP、IE7都支持,從此可以告別那又長兼容性又差的FF清浮動的方法了。 方法真的很簡單,只要為需要清浮動的標(biāo)簽加上overflow這個屬性。2008-10-17- 網(wǎng)頁制作Webjx文章簡介:文字隱藏應(yīng)用廣泛,但常用的方法沒有什么親和力。 文字隱藏應(yīng)用廣泛,但常用的方法沒有什么親和力。 常用文字隱藏方法的缺陷:2009-04-02
CSS--overflow:hidden在項(xiàng)目實(shí)例中使用心得分享
大家對CSS屬性中overflow:hidden并不陌生,至于它的應(yīng)用,在下文中列出我在項(xiàng)目中,運(yùn)用到此屬性的例子,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-04css中position:relative和overflow:hidden之間的問題
在父標(biāo)簽中使用了overflow:hidden;時,如果子標(biāo)簽中有元素的position設(shè)置成relative的時候,在IE6和IE7中父元素的overflow對其將不起作用,其實(shí)將父標(biāo)簽的position也設(shè)置成2013-09-04