網(wǎng)頁設(shè)計中的內(nèi)容溢出

  • 2019-03-04 16:19:34
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

如果一個元素的內(nèi)容對于元素大小來說過大,就有可能溢出元素本身。對于這種情況,網(wǎng)頁設(shè)計人員有一些候選解決辦法,網(wǎng)站建設(shè)CSS2允許你從中選擇。它還允許定義一個剪裁區(qū)域,如果出了這個剪裁區(qū)域,這種溢出就會帶來問題。

溢出

假設(shè)出于某種原因,網(wǎng)頁設(shè)計中一個元素固定為某個特定大小,但內(nèi)容在元素中放不下。此時就可以利用overflow屬性控制這種情況。

overflow

值:visible | hidden | scroll | auto | inherit

初始值:visible

應(yīng)用于:塊級元素和替換元素

繼承性:無

計算值:根據(jù)指定確定

默認(rèn)值visible表明,網(wǎng)頁設(shè)計元素的內(nèi)容在元素框之外也可見。一般地,這會導(dǎo)致內(nèi)容超出其自己的元素框,但不會改變框的形狀。以下標(biāo)記會得到如圖10-31所示的結(jié)果:div#sidebar {position: absolute; top: 0; left: 0; width: 25%; height: 7em; background:#bbb; overflow: visible;}

如果overflow設(shè)置為scroll,元素的內(nèi)容會在元素框的邊界處剪裁——也就是說,溢出的部分將無法看到,不過還是有辦法讓用戶得到這些額外的內(nèi)容。在Web瀏覽器中,這可能意味著使用一個滾動條(或類似的東西)或者使用另外某種方法訪問內(nèi)容而不會改變元素本身的形狀。圖10-32所示就是一種可能的情況,這是由以下標(biāo)記得到的:

div#sidebar {position: absolute: top: 0; left: 0; width: 15%; height: 7em; overflow: scroll;}

如果使用scroll,應(yīng)該始終提供某種滾動機制(例如滾動條)。援引規(guī)范中的說法,“這會避免動態(tài)環(huán)境中滾動條出現(xiàn)或消失所帶來的問題”。因此,即使元素有足夠的空間顯示所有內(nèi)容,也應(yīng)當(dāng)顯示滾動條。另外,打印一個頁面或在打印媒體中顯示文檔時,內(nèi)容可能顯示為就好像overflow值聲明為visible —樣。

如果overflow被設(shè)置為hidden,元素的內(nèi)容會在元素框的邊界處剪裁,不過不會提供滾動接口使用戶訪問超出剪裁區(qū)域的內(nèi)容??紤]以下標(biāo)記:

div#sidebar {position: absolute; top: 0; left: 0; width: 15%; height: 7em; overflow: hidden;}

在這種情況下,被剪裁的內(nèi)容對用戶來說不可用。這會得到如圖10-33所示的結(jié)果。

圖10-33:在內(nèi)容區(qū)邊界處剪裁內(nèi)容

最后還有一個值overflow: auto。這允許用戶代理來確定采用何種行為,不過都網(wǎng)頁設(shè)計人員建議在必要時提供一個滾動機制。這可能是overflow的一個有用的用法,因為用戶代理可以把它解釋為“只在必要時提供滾動條”(也可能有些用戶代理不這樣解釋,不過一般來講,用戶代理當(dāng)然可以而且往往應(yīng)當(dāng)這樣解釋)。


當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計中的內(nèi)容溢出

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/content-overflow.html

上一篇:網(wǎng)頁設(shè)計中的寬度和高度

下一篇:網(wǎng)頁設(shè)計中的內(nèi)容裁剪

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)