overflow

CSS属性 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是overflow-x和overflow-y的简写属性

示例

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

浏览器支持

语法

取值

• visible：默认值。内容不会被修剪，可以呈现在元素框之外。
• hidden：如果需要，内容将被剪裁以适合填充框。不提供滚动条。
• scroll：如果需要，内容将被剪裁以适合填充框。浏览器显示滚动条，无论是否实际剪切了任何内容。（这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。
• auto：取决于用户代理。如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。如果内容溢出，桌面浏览器会提供滚动条。
• overlay：行为与auto相同，但滚动条绘制在内容之上而不是占用空间。仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。此项目还处于实验阶段

实例

p {  
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; /* 内容不会被修剪 */ 
}

p { overflow: hidden; /* 不显示滚动条 */  }

p { overflow: scroll; /* 始终显示滚动条 */  }

p { overflow: auto; /* 必要时显示滚动条 */  }