• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • overflow-x

    当一个块级元素的内容在水平方向发生溢出时,CSS属性overflow-x决定应该截断溢出内容,或者显示滚动条,或者直接显示溢出内容。

    示例

    overflow-x: visible
    overflow-x: hidden
    overflow-x: scroll
    overflow-x: auto
    
    overflow-x: inherit
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持overflow-x

    语法

    overflow-x:visible| hidden| scroll| auto

    取值

    • visible:内容不会被截断,且可以显示在内容盒之外。
    • hidden:内容会被截断,且不会显示滚动条。
    • scroll:桌面浏览器总是显示滚动条,无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。
    • auto:取决于浏览器本身。当内容发生溢出时,桌面浏览器如Firefox会显示滚动条。
    默认值visible
    适用于块容器,伸缩盒容器,grid容器
    继承性
    动画性
    计算值指定值

    实例

    div{
     overflow-x:hidden;
    }
    

    上篇:overflow

    下篇:overflow-y