css怎么实现超出高度隐藏-猿码集

1. 背景介绍

在网页的开发过程中，有些情况下需要隐藏元素的内容。针对于区域高度超出的情况，我们需要控制元素的高度并实现超出高度隐藏，这时 CSS 属性 overflow 便可派上用场。接下来，将详细介绍 CSS 如何实现超出高度隐藏。

2. CSS overflow 属性

overflow 属性描述了当元素的内容超过了其指定高度和宽度时发生的事情。当元素内的内容产生溢出时，可以通过设置 overflow 属性来指定其内容如何处理。

overflow 有四个取值：

visible：默认值，不裁剪内容也不添加滚动条

hidden：超出部分被隐藏，不会显示滚动条

scroll：超出部分被隐藏，会显示滚动条

auto：超出部分被隐藏，自动添加滚动条

2.1 overflow: hidden

overflow 属性的取值 hidden 可以实现超出部分被隐藏，不显示滚动条。此时，元素的内容被裁剪，且无法通过滚动条或其它手段访问被裁剪的内容。


.box {
  height: 200px;
  overflow: hidden; /* 超出部分被隐藏 */
}

2.2 overflow: scroll

overflow 属性的取值 scroll 可以实现超出部分被隐藏，同时显示滚动条。此时，滚动条总是显示，无论内容是否溢出，即便不存在溢出的情况下，也会显示一个未激活的滚动条，其长度为 0。


.box {
  height: 200px;
  overflow: scroll; /* 超出部分被隐藏，显示滚动条 */
}

2.3 overflow: auto

overflow 属性的取值 auto 可以实现超出部分被隐藏，并自动添加滚动条。此时，如果内容总是溢出的则会显示一个滚动条，否则滚动条将不被显示。


.box {
  height: 200px;
  overflow: auto; /* 超出部分被隐藏，自动添加滚动条 */
}

3. 隐藏元素超出高度的内容

我们可以通过设置容器元素的高度和 overflow 属性来实现超出高度的内容隐藏。

假设我们有一个 div 元素，内容高度超出了 300px。此时需要保留 200px 的高度，并实现隐藏剩余的内容，代码如下：


.box {
  height: 200px;
  overflow: hidden;
}

当元素内的内容高度超过 200px 时，多余的内容将被隐藏。

4. 经典应用场景

Overflow 属性在网页开发中应用十分广泛，下面介绍一些经典场景。

4.1 图片裁剪

当我们设置图片的尺寸小于图片本身的实际尺寸时，可以使用 overflow:hidden 属性进行裁剪，举个例子：


<img src="example.jpg" alt="example" class="img">


.img {
  width: 200px; /* 设置图片宽度为 200px */
  height: 200px; /* 设置图片高度为 200px */
  overflow: hidden; /* 超出部分被隐藏 */
}

4.2 多行文本超出省略

我们可以通过设置容器元素的高度，利用 overflow:hidden 属性来隐藏超出高度的文本。为了显示被隐藏的文本，在元素的伪元素 ::after 中使用 content 属性插入省略号。


<div class="text">
  This is a long text. This is a long text. This is a long text. This is a long text.
</div>


.text {
  height: 50px; /* 显示两行文本 */
  overflow: hidden;
  position: relative; /* 控制伪元素的位置 */
}
.text::after {
  content: "..."; /* 插入省略号 */
  position: absolute; /* 控制偏移位置 */
  bottom: 0;
  right: 0;
  padding-left: 40px; /* 空出省略号的位置 */
  background: linear-gradient(to right, transparent, #fff 50%); /* 线性渐变背景 */
}

4.3 模态框

在模态框的实现中，为了实现弹框内部的滚动效果，我们可以为模态框设置 height 和 overflow 属性。


.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  height: 500px; /* 设置模态框高度 */
  overflow: auto; /* 超出部分被滚动条隐藏 */
}

5. 总结

CSS 的 overflow 属性可以很方便地控制元素的高度和超出高度内容的显示，实现的方法也比较简单。我们可以通过这个属性来实现很多网页排版的特效和交互设计，是前端开发中的重要组成部分。

css怎么实现超出高度隐藏