首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

溢出-x | overflow-x

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

代码语言:javascript
复制
/* Content is not clipped */
overflow-x: visible;

/* Content is clipped, with no scrollbars */
overflow-x: hidden;

/* Content is clipped, with scrollbars */
overflow-x: scroll;

/* Let the browser decide */
overflow-x: auto;

/* Global values */
overflow-x: inherit;
overflow-x: initial;
overflow-x: unset;

初始值

visible

适用元素

non-replaced block-level elements and non-replaced inline-block elements

是否是继承属性

no

适用媒体

visual

计算值

as specified

Animation type

discrete

正规顺序

the unique non-ambiguous order defined by the formal grammar

语法

visible内容不会被截断,且可以显示在内容盒之外。

hidden内容会被截断,且不会显示滚动条。

scroll桌面浏览器总是显示滚动条,无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。

auto取决于浏览器本身。当内容发生溢出时,桌面浏览器如Firefox会显示滚动条。

正式语法

代码语言:javascript
复制
visible | hidden | scroll | auto

示例

HTML

代码语言:javascript
复制
<ul>
  <li><code>overflow-x:hidden</code> — hides the text outside the box
    <div id="div1">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:scroll</code> — always add a scrollbar
    <div id="div2">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:visible</code> — displays the text outside the box if needed
    <div id="div3">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:auto</code> — on most browsers, equivalent to <code>scroll</code>
    <div id="div4">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>
</ul>

CSS

代码语言:javascript
复制
#div1, #div2, #div3, #div4 {
  border: 1px solid black;
  width:  250px;
  margin-bottom: 12px;
}

#div1 { overflow-x: hidden;}
#div2 { overflow-x: scroll;}
#div3 { overflow-x: visible;}
#div4 { overflow-x: auto;}

结果

规范

Specification

Status

Comment

CSS Overflow Module Level 3The definition of 'overflow-x' in that specification.

Working Draft

CSS Basic Box ModelThe definition of 'overflow-x' in that specification.

Working Draft

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

1.0

(Yes)

3.5 (1.9.1)

5.01

9.5

3.0

Feature

Android

Chrome for Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

1.0

(Yes)

(Yes)

1.0 (1.9.1)

(Yes)

(Yes)

(Yes)

扫码关注腾讯云开发者

领取腾讯云代金券