CSS Overflow属性

overflow 属性控制可视区域外的内容的表现方式。

语法

overflow: visible|hidden|scroll|auto|inherit;

• visible：默认值，内容不会被修剪，会溢出容器。
• hidden：内容会被修剪，不会溢出容器，完全隐藏。
• scroll：内容会被修剪，但是用户仍然可以滚动容器来查看内容。
• auto：当内容大于容器时，内容会被修剪，当内容小于容器时，不会出现滚动条。
• inherit：从父元素继承 overflow 属性的值。

案例

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum viverra finibus. Sed in massa in nisi faucibus tincidunt. Vivamus sollicitudin accumsan tellus nec facilisis. In pretium iaculis lorem eget ullamcorper. Quisque imperdiet porttitor hendrerit. Sed vehicula placerat ipsum, non dapibus neque vehicula in. </p>
  </div>
</div>

.container {
  width: 200px;
  height: 100px;
  border: 1px solid #ddd;
  overflow: hidden;
}

.content {
  width: 300px;
}

p {
  margin: 0;
}

上面的例子中，通过设置 container 容器的 overflow 属性为 hidden，将超出容器高度的 content 内容隐藏起来。

总结

overflow 属性可以控制容器的溢出内容的表现形式。应用得当，可以优化用户体验，使布局更加合理。