css中的overflow需要注意的問題

2021-07-08 12:17:34 字數 1148 閱讀 1492

html中經常會碰到內容超出乙個元素的顯示範圍。overflow就是用來控制超出內容的顯示方式。它有以下幾個可選項:

visible為預設值,內容會全部顯示,但是會在元素框之外。 hidden為隱藏超出的內容。auto為內容超出時自動出現滾動條,否則不顯示滾動條。scroll為始終顯示滾動條。

css3中還有overflow-x和overflow-y分別定義x軸和y軸的滾動方式。但是需要注意的是當oveflow-x和overflow-y中有乙個是visible而另外乙個不是visible的時候,visible會變為auto。舉例來說

.test

這就等價於

.test

w3c中原文如下

the computed values of 『overflow-x』 and 『overflow-y』 are the same as their specified values, except that some combinations with 『visible』 are not possible: if one is specified as 『visible』 and the other is 『scroll』 or 『auto』, then 『visible』 is set to 『auto』. the computed value of 『overflow』 is equal to the computed value of 『overflow-x』 if 『overflow-y』 is the same; otherwise it is the pair of computed values of 『overflow-x』 and 『overflow-y』.

簡潔版:

if you are usingvisiblefor eitheroverflow-xoroverflow-yand something other thanvisiblefor the other. thevisiblevalue is interpreted asauto.

參考:還需要注意的是:文字內容是無法橫向滾動的。除非是設定不自動換行,即:white-space:nowrap。

CSS中的overflow屬性

如果元素中的內容超出了給定的寬度和高度屬性,overflow 屬性可以確定是否顯示滾動條,是否隱藏溢位部分等行為,規定當內容溢位元素框時發生的事情。visible 預設值。內容不會被修剪,會呈現在元素框之外。hidden 內容會被修剪,並且其餘內容是不可見的。scroll 內容會被修剪,但是瀏覽器會...

Css中overflow屬性的認識

overflow 溢位 hidden 隱藏。這個css屬性,用於將溢位到盒子border外的內容隱藏。案例1 對溢位要做處理 新增 overflow hidden 再看乙個案例 直觀上看,這個屬性對網頁設計人員來說真是福音!比如乙個盒子內部有乙個比自己還寬的子盒子,這時候就會影響自己的表現。只需要給...

Css中overflow屬性的相關介紹

overflow css屬性 overflow 為css中設定當物件的內容超過其指定高度及寬度時如何管理內容的屬性。初始值 visible 適用於 block level and replaced elements 繼承性 無百分比 n a visual 版本 css2 相容性 ie4 ns6 ov...