css样式如何实现超出隐藏

什么是“超出隐藏”？

“超出隐藏”指的是在HTML和CSS中，在某个容器内，当内容超出容器大小时，如何处理溢出的部分。一些情况下，我们可能需要在内容太多时使其自动收缩，并在有需要时增加滚动条，而不是打破布局。

如何在CSS中实现“超出隐藏”？

在CSS中，我们可以使用overflow属性来处理“超出隐藏”的问题。overflow有四个可取值：visible（默认值），hidden，scroll和auto。当overflow被设置为hidden时，容器会隐藏其中超出容器大小的元素，而不是让它们破坏布局。

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

如何通过JavaScript实现“超出隐藏”？

我们可以使用JavaScript来动态计算容器的高度，并设置overflow为hidden或auto。这种做法适合于内容高度随着用户输入而动态变化的情况。以下是基于jQuery的实现方法：

// 设置max-height，超过该高度使用滚动条
var maxHeight = 100;
var $container = $('.container');
if ($container.height() > maxHeight) {
  $container.height(maxHeight);
  $container.css('overflow', 'auto');
}

如何实现horizontal超出隐藏?

除了以vertical方向为基础外，我们还可以使用text-overflow属性来实现横向的“超出隐藏”。这个属性只对一行文本有效，它通过计算文字宽度和容器宽度，并添加省略号（ellipsis）来实现“超出隐藏”。下面的例子通过CSS和HTML实现：

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}