CSS超出内容自动隐藏

在网页开发中，经常会遇到内容超出容器大小的情况，这时候就需要使用CSS来处理，让超出部分自动隐藏起来。本文将详细讲解如何通过CSS实现内容超出时的自动隐藏效果。

overflow属性

在CSS中，通过overflow属性可以控制一个元素的内容超出容器时的表现。overflow属性有以下几个取值：

visible：默认值，内容超出容器时会呈现出来。
hidden：内容超出容器时将会被隐藏起来。
scroll：在超出容器时显示滚动条。
auto：在超出容器时只有在需要时才显示滚动条。

示例

为了演示overflow属性的效果，我们创建一个简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Example</title>
<style>
  .container {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    overflow: hidden;
  }

  .container-inner {
    width: 250px;
    height: 120px;
    background-color: #f0f0f0;
  }
</style>
</head>
<body>
<div class="container">
  <div class="container-inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec nulla urna. Donec in tristique mauris. Nunc aliquet neque eget leo aliquet, ut euismod enim auctor. Praesent id mauris nec sem porta varius. Maecenas a gravida libero. Curabitur vel turpis nec orci aliquet auctor. Aliquam vestibulum augue nec dapibus condimentum. Integer sit amet lectus quis nisi pulvinar semper. Nam eu aliquam velit, sed iaculis risus.
  </div>
</div>
</body>
</html>

在上面的示例中，我们创建了一个容器.container，宽度为200px，高度为100px，并且设置了overflow: hidden;属性。容器内部的.container-inner宽度为250px，高度为120px，超出了.container的范围。

当浏览器渲染上述代码时，.container-inner元素超出了.container容器的范围，但由于我们设置了overflow: hidden;属性，超出的部分将会被隐藏起来。