详解CSS3：overflow属性

详解CSS3：overflow属性

overflow 属性用于控制一个容器中的内容溢出时的显示方式。

值

overflow 属性有以下几个可能的值：

• visible：默认值，内容可以溢出容器。
• hidden：内容溢出容器时隐藏溢出部分，无法滚动查看。
• scroll：内容溢出容器时显示滚动条，并且可以通过滚动条查看溢出的内容。
• auto：内容溢出容器时，根据需要决定是显示滚动条还是隐藏溢出部分，并且可以通过滚动条查看溢出的内容。

示例说明

示例一

以下示例演示了如何在一个固定大小的容器中控制两个子元素的溢出部分的显示效果：

<div class="container">
  <div class="item1">This is item1</div>
  <div class="item2">This is item2</div>
</div>

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

.item1 {
  width: 250px;
  height: 50px;
  background-color: red;
}

.item2 {
  width: 150px;
  height: 70px;
  background-color: yellow;
}

上面的代码中，容器 .container 的大小固定为 200px x 100px，同时设置了 border 属性，使其可以更明显地看到容器的实际大小。在容器中，有两个子元素 .item1 和 .item2，它们各自设置了不同的大小和颜色。

由于 .item1 的宽度超过了容器的宽度，所以它的右侧部分被隐藏了。在这种情况下，我们使用 overflow: hidden 来控制溢出部分的显示效果。因此，容器 .container 的右侧部分被遮挡住了。

示例二

以下示例演示了如何在一个固定大小的容器中控制有溢出内容的文本的显示效果，并使其可以通过垂直滚动条查看溢出部分：

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis ornare neque sit amet ultrices. Maecenas pellentesque dui ligula, nec vehicula nisl varius vel. Duis vel dignissim nibh, eget lacinia leo. Suspendisse bibendum arcu a iaculis convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque euismod tellus sed nulla elementum interdum. Praesent non finibus orci, nec vehicula quam. Quisque quis ligula nec lectus faucibus efficitur. Pellentesque ac lectus eu neque consectetur consectetur vitae eget libero. In quis mollis arcu. Suspendisse consectetur, nisl at commodo sollicitudin, lectus urna bibendum justo, sed consequat arcu augue sed turpis. Sed vel mauris risus. Donec tristique elit vel nulla pulvinar posuere. Nullam eget mi ut metus rutrum mollis vel sit amet velit.</p>
</div>

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: scroll;
}

p {
  line-height: 1.5;
}

上面的代码中，容器 .container 的大小仍然是 200px x 100px，但是内容现在是一个包含了很多文本的段落。由于段落的长度超过了容器的宽度和高度，所以它的部分内容会被隐藏。

在这种情况下，我们使用 overflow: scroll 来控制溢出部分的显示效果，并且允许用户使用滚动条来查看溢出的内容。因此，我们可以在容器 .container 的右侧和底部看到垂直和水平滚动条，通过滚动这些滚动条，我们可以轻松地查看整个段落内容。

结论

通过 overflow 属性，我们可以轻松地控制容器中内容的溢出部分的显示效果，并使其更容易让用户查看溢出的内容。在实际网站设计中，我们可以根据不同的情况，选择不同的 overflow 属性值。