overflow-x CSS屬性指定當(dāng)內(nèi)容在元素內(nèi)容區(qū)域的左右邊緣溢出時,是剪切內(nèi)容、是滾動條還是顯示溢出內(nèi)容。
下表為此屬性的用法說明和版本歷史記錄,以及該屬性在javascript腳本中的使用語法。
默認(rèn)值: | visible |
---|---|
適用于: | Block, inline-block and flex容器 |
繼承: | 沒有 |
可動畫制作: | 否。請參見 動畫屬性。 |
版本: | CSS3的新功能 |
JavaScript 語法: | object.style.overflowX="scroll" |
該屬性的語法如下:
overflow-x: visible | hidden | scroll | auto | initial | inherit
下面的示例演示了如何使用overflow-x屬性。
div { width: 400px; height: 300px; overflow-x: scroll; }測試看看?/?
下表描述了此屬性的值。
值 | 描述 |
---|---|
visible | 內(nèi)容沒有被剪切;它會在元素框的外部渲染,因此可能與其他內(nèi)容重疊。這是默認(rèn)值。 |
hidden | 溢出元素框的內(nèi)容將被剪切,其余內(nèi)容將不可見。 |
scroll | 溢出的內(nèi)容像被隱藏一樣被剪切,但是提供了滾動機制來訪問溢出的內(nèi)容。 |
auto | 如果內(nèi)容溢出元素的框,它將提供滾動條以查看其余內(nèi)容。 |
initial | 將此屬性設(shè)置為其默認(rèn)值。 |
inherit | 如果指定,則關(guān)聯(lián)元素采用其父元素overflow-x的屬性值。 |
overflow-x屬性瀏覽器的兼容性,下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號;所有主流瀏覽器均支持該屬性。
![]() |
|
警告: Internet Explorer 7和更早版本不支持該overflow-x屬性。IE8支持此屬性,但是需要Microsoft特定的
-ms-前綴(例如-ms-overflow-x)。在IE9及更高版本中受支持。
請參考以下教程:CSS Overflow。
相關(guān)屬性:overflow,overflow-y,clip,word-wrap。