CSS之overflow屬性用法

2022-01-02 12:14:35 字數 3527 閱讀 5280

1樓:溫未鹹曼青

css之overflow屬性有四個值:visible

(預設),

hidden,

scroll,

和auto。同樣有兩個overflow的姐妹屬性overflow-y

和overflow-x,它們很少被採用。讓我們分別看一下這幾個值,並討論一寫共同用法和技巧。

auto

overflow的auto值很像scroll,它唯一解決的是在你不需要的時候也會出現滾動條的問題。

hidden

預設值visible的相反的值就是hidden。它會將所有超出盒子的所有內容都給隱藏掉。這對應付使用動態的內容,而且可能會由於內容溢位而引起一些布局上的問題的確很有用。

儘管如此,請記住用此方法隱藏的內容將徹底的看不到(除非去檢視源**)。

比如有的使用者設定他們的瀏覽器的預設字型比你預期的要大些,你會將一些文字推到盒子的外面然後完全的隱藏之……

visible

如果你不設定overflow屬性,則預設的overflow屬性值就是visible。所以一般而言,並沒有什麼理由特別的設定overflow的屬性為visible除非你想覆蓋它在其它地方被設定的值。這裡需要記住的重要的事情是,儘管盒子外面的內容是可見的,內容並不會影響頁面的工作流。

一般來說,你至少不用為裡面的內容為文字的盒子設定固定的高度,這樣就不會遇到這種情況了。

scroll

設定乙個盒子的overflow值為scroll將會隱藏掉渲染到盒子之外的內容,但是它將會提供乙個滾動條在盒子內部滾動,從而可以檢視剩下的內容。值得注意的是,使用scroll將會同時產生水平和垂直兩個滾動條,就算內容只需要其中乙個。

2樓:書香學程式設計

vue實踐-css樣式position/display/float屬性對比使用

css中text-overflow的屬性用法怎麼用

3樓:貓的時間

語法:text-overflow : clip | ellipsis引數:

clip : 不顯示省略標記(...),而是簡單的裁切ellipsis :

當物件內文字溢位時顯示省略標記(...)說明:設定或檢索是否使用乙個省略標記(...

)標示物件內文字的溢位。

對應的指令碼特性為textoverflow。請參閱我編寫的其他書目。

示例:div

要想讓多餘的文字自動隱藏,用text-overflow : clip;會自動加省略標記(...)。

用text-overflow :ellipsis不會加省略標記(...)

css裡面的overflow的用法

4樓:匿名使用者

語法:overflow : visible | auto | hidden | scroll

取值:visible :  預設值。

不剪下內容也不新增滾動條。假如顯式宣告此預設值,物件將以包含物件的 window 或 frame 的尺寸裁切。並且 clip 屬性設定將失效

auto :  在必需時物件內容才會被裁切或顯示滾動條

hidden :  不顯示超過物件尺寸的內容

scroll :  總是顯示滾動條

說明:檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。

所有物件的預設值是 visible ,除了 textarea 物件和 body 物件的預設值是 auto 。設定 textarea 物件此屬性值為 hidden 將隱藏其滾動條。

對於 table 來說,假如 table-layout 屬性設定為 fixed ,則 td 物件支援帶有預設值為 hidden 的 overflow 屬性。如果設為 scroll 或者 auto ,那麼超出 td 尺寸的內容將被剪下。如果設為 visible ,將導致額外的文字溢位到右邊或左邊(視 direction 屬性設定而定)的單元格。

自ie5開始,此屬性在mac平台上可用。

自ie6開始,當你使用 !doctype 宣告指定了 standards-compliant 模式,此屬性可以應用於 html 物件。

-----------------css2.0手冊中overflow的原文,這種問題還是直接找手冊看的好

css屬性overflow屬性定義溢位元素內容區的內容會如何處理?

5樓:匿名使用者

引數是 scroll 時候,必會出現滾動條;

引數是 auto 時候,子元素內容大於父元素時出現滾動條;

引數是 visible 時候,溢位的內容出現在父元素之外;

引數是 hidden 時候,溢位隱藏

可以多看看黑馬程式設計師的課程,多學學這些基礎知識。如果對我的回答滿意的話,請採納

6樓:匿名使用者

朋友,overflow具體如何定義溢位內容,要看你給定的值來具體處理。

overflow:visible,這個就是預設值。內容不會被修剪,會呈現在元素框之外。

overflow:hidden,這個值代表的是內容會被修剪,並且其餘內容是不可見的。

overflow:scroll,這個值代表內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。

overflow:auto,這個代表如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。

overflow:inherit,這個代表規定應該從父元素繼承 overflow 屬性的值。

這些值才是overflow處理溢位內容的關鍵,根據需求設定不同的值即可。

css中overflow屬性聽說很好玩,我一直搞不懂這個具體怎麼好玩,怎麼用的,請教~~急~~~謝謝~~~重賞~~~~~呵

7樓:秋葉原失利

overflow這個屬性就是可以讓容器裡(塊元素)的內容即使超出容器也會給它乙個滾動的定義,一般最常用的屬性就是 overflow:hidden;因為這個屬性可以讓元素能夠包容浮動的塊元素,也就是有float屬性的元素。

現在用float做的網頁越來越多了,float也被引申出各種各樣的用法,但其實頁面布局只要達到效果了就是最好,至於有趣嘛,鑽進去了就是有趣。

8樓:

簡單點說就是如果你定義的div塊或其他元素超出父容器的範圍了,overfloat可以設定超出部分是否顯示下邊是兩個例子你弄到html檔案裡看看效果就明白了(overflow屬性要設定在父容器裡);

新增了overflow屬性

http://www.w3.org/1999/xhtml">父容器子容器

未新增overflow屬性

http://www.w3.org/1999/xhtml">父容器子容器

9樓:匿名使用者

overflow:hidden 簡單明瞭的說就是溢位隱藏

css屬性寫法mediascreenandmin

media screen and min width 41 x and min height 300px 多個條件之間用and連線即可 vue實踐 css樣式position display float屬性對比使用 css中 media only screen and max width 639px...

position屬性值有哪些,css中定位position有哪幾個屬性值?

有以下幾種 1 absolute 生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 left top right 以及 bottom 屬性進行規定。2 fixed 生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 left top right 以及...

用css給指定文字新增顏色,用css如何定義一段文字中某些字的顏色,比如 我們去哪 ,要求文字中所有的 去 全用紅色顯示

比如 釣魚島是中國的 這句話,我想要 中國 這兩字顯示紅色其它不變色,怎麼弄 直接把樣式寫在html裡面 釣魚島是中國的 給中國加標籤,span 釣魚島是中國的 span 給這兩個字加個標籤,css裡的color red 使用css設定html字型顏色方法有兩種,一種是標籤內css 一種是外部css...