上一节:
下一节:

  CSS 溢出

  • CSS溢出

    overflow属性指定当元素的内容太大而无法放入指定区域时是剪辑内容还是添加滚动条。overflow属性具有以下值：
    • visible - 默认。溢出没有被剪裁。它呈现在元素框之外
    • hidden - 溢出被剪切，其余内容将不可见
    • scroll - 剪辑溢出，但添加了滚动条以查看其余内容
    • auto - 如果剪切了溢出，则应添加滚动条以查看其余内容
    注意：overflow属性仅适用于具有指定高度的块元素。 注意：在OS X Lion（在Mac上），默认情况下隐藏滚动条，仅在使用时显示（即使设置了“overflow：scroll”）。

  • overflow:visible

    默认情况下，溢出是visible，意味着它没有被剪切，它呈现在元素的框外： 
    div {
     background-color: #eee;
     width: 200px;
     height: 50px;
     border: 1px dotted black;
     overflow: visible;
   }
    尝试一下

  • overflow:hidden

    使用hidden值，将剪切溢出，并隐藏其余内容： 
    div {
           background-color: #eee;
           width: 200px;
           height: 50px;
           border: 1px dotted black;
           overflow: hidden;
       }
    尝试一下

  • overflow:scroll

    将值设置为scroll，剪辑溢出并添加滚动条以在框内滚动。请注意，这将在水平和垂直方向添加滚动条（即使您不需要它）： 
    div {
           background-color: #eee;
           width: 200px;
           height: 50px;
           border: 1px dotted black;
           overflow: scroll;
       }
    尝试一下

  • overflow:auto

    auto值类似于scroll，只在必要时添加滚动条： 
    div {
           background-color: #eee;
           width: 200px;
           height: 50px;
           border: 1px dotted black;
           overflow: auto;
       }
    尝试一下

  • overflow-x和overflow-y

    overflow-x和overflow-y特性指定是否只是水平或垂直（或两者）改变内容溢出：overflow-x指定如何处理内容的左/右边缘；overflow-y指定如何处理内容的顶部/底部边缘。 
    div {
         background-color: #eee;
         width: 200px;
         height: 50px;
         border: 1px dotted black;
         overflow-x: hidden;
         overflow-y: scroll;
       }
    尝试一下

  • 所有CSS溢出属性

    属性 描述
    overflow 指定内容溢出元素框时会发生什么
    overflow-x 指定当内容溢出元素的内容区域时如何处理内容的左/右边缘
    overflow-y 指定当内容溢出元素的内容区域时如何处理内容的顶部/底部边缘

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: