超出2行显示展开,不超出不显示展开 css

要实现超出2行显示展开，不超出不显示展开的效果，可以使用CSS中的文本溢出属性（text-overflow）和伪类（::after）结合。

首先，设置文本容器的宽度和高度，并使用CSS中的溢出属性设置超出2行的文本隐藏，并使用ellipsis（省略号）表示文本被截断。样式代码如下：

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

然后，使用CSS中的伪类::after来判断文本是否溢出，如果溢出则展示一个“展开”按钮。样式代码如下：

.container::after {
  content: '展开';
  display: none;
}

.container.overflowed::after {
  display: inline-block;
}

接下来，通过JavaScript来判断文本是否溢出，并为相应的文本容器添加类名。样式代码如下：

const containers = document.querySelectorAll('.container');

containers.forEach(container => {
  if (container.scrollWidth > container.clientWidth) {
    container.classList.add('overflowed');
  }
});

最后，在HTML中添加文本容器，并引入相关的CSS和JavaScript文件。样式代码如下：

<div class="container">
  这里是文本内容
</div>

<script src="script.js"></script>

这样，当文本超出2行时，“展开”按钮就会显示出来，用户就可以点击按钮来展开文本内容。当文本不超出2行时，“展开”按钮会隐藏。