CSS 忽略 overflow: hidden

在本文中，我们将介绍如何使用CSS属性overflow: hidden来实现内容的溢出隐藏。

阅读更多：CSS 教程

源起

在Web开发中，内容的溢出是一个常见的问题。当元素的内容超出其容器的边界时，这些溢出的内容通常会被隐藏起来，以保持页面的整洁和美观。CSS中的overflow: hidden属性就是用于实现这一效果的。

`overflow`属性介绍

overflow属性用于控制元素内内容的溢出显示方式。它有以下几个取值：
– visible：内容不会被裁剪，会显示在容器之外。
– hidden：内容溢出部分会被裁剪，不显示在容器之外。
– scroll：如果内容溢出，则显示滚动条。
– auto：如果内容溢出，则根据需要显示或隐藏滚动条。

`overflow: hidden`的应用

overflow: hidden常用于容器元素中，用来隐藏其中的溢出内容，让页面保持整洁美观。当父元素设置了overflow: hidden后，其子元素超出父元素的部分将会被隐藏起来。

以下是一个例子：

<style>
  .container {
    width: 200px;
    height: 200px;
    overflow: hidden;
  }
  .content {
    width: 400px;
    height: 400px;
  }
</style>

<div class="container">
  <div class="content">
    这里是内容...
  </div>
</div>

在上述例子中，.container是一个固定宽高的容器，.content是其子元素，宽高超过了容器的尺寸。由于.container设置了overflow: hidden，所以.content超出容器部分的内容会被隐藏起来。

`overflow: hidden`的实际应用场景

overflow: hidden广泛应用于各种网页元素的样式控制中。下面列举了一些常见的应用场景：

清除浮动

在网页布局中，浮动元素可能会导致父元素无法正确计算高度，造成布局混乱。可以在父元素上使用overflow: hidden来清除浮动，并使父元素根据子元素自适应高度。

<style>
  .clearfix::after {
    content: '';
    display: table;
    clear: both;
  }
  .parent {
    overflow: hidden;
  }
  .float-child {
    float: left;
  }
</style>

<div class="parent clearfix">
  <div class="float-child">
    浮动元素1
  </div>
  <div class="float-child">
    浮动元素2
  </div>
</div>

在上述例子中，.parent是包含浮动元素的容器，通过使用overflow: hidden清除了浮动。.clearfix是一个用于清除浮动的类。

文字裁剪

有时候在网页中，我们只想显示一部分文字，而不是全部内容。可以通过使用overflow: hidden以及配合其他CSS属性实现文字裁剪的效果。

<style>
  .text {
    width: 200px;
    height: 1.5em;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

<div class="text">
  这里是一段较长的文字内容，如果超出了容器的宽度，将会被裁剪并显示省略号。
</div>

在上述例子中，.text是一个具有固定宽度和高度的容器，超出宽度的文字会被裁剪，并显示省略号(...)来表示文本被缩略了。