170420-css-overflow-related

weixin_34146805發表於2017-04-20

default & initial

browser default & css property inital(CSS specifications

For example, for the display property, initial always means inline, because that’s the designated initial value of the property. In the example case, the browser default is block, since the element is div.

Thus, the initial value is of limited usefulness. A possible use case is for the color property, since its initial value is browser-dependent (mostly black, as we know, but not necessarily). For it, initial means browser default, since that’s how the property has been defined.

A similar use case is for font-family: by declaring font-family: initial, you get browser’s default font (which may depend on browser settings).


unset (css3)

屬性值unset的值為:如果該樣式是自動被繼承的,則其值為繼承的值;如果該樣式不是自動被繼承的,則其值為CSS規範(CSS specifications)指定的值。

可見屬性值unset是initialinherit的組合。

The inherit, initial, and unset values


overflow (css2):

visible(default): 如果內容過長,超出元素框顯示

scroll: 不論內容多少,總顯示兩個滾動條

hidden: 超出內容不顯示

auto: 只有在內容超出才會顯示滾動條

inherit: 從父元素繼承,IE不支援

initial: ????

unset: ????


overflow-x (css3):

visible(default): 同overflow

scroll: 不論內容多少,總顯示兩個滾動條

hidden: 高方向上有滾動條

auto: 同overflow

no-display: 如果內容不適合內容框,則刪除整個框(文字測出來同visible)????

no-content: 如果內容不適合內容框,則隱藏整個內容(文字測出來同visible)????


overflow-y (css3):

visible(default):同overflow

scroll: 出現高的滾動條

hidden: 顯示寬方向上滾動條

auto: 同overflow

no-display: 如果內容不適合內容框,則刪除整個框(文字測出來同visible)????

no-content: 如果內容不適合內容框,則隱藏整個內容(文字測出來同visible)????


overflow-style (css3):

Not supported by any browser


text-overflow (css3):

elipsis: 顯示省略號

clip: 隱藏超出部分

string: ????

overflow 與 text-overflow

將超出部分顯示成省略號要同時寫以下屬性

{

white-space:nowrap;

width:12em;

overflow:hidden;

border:1px solid #000000;

text-overflow:ellipsis;

}