CSS实现文本自动展开且超出两行显示展开下箭头方法

在网页设计中，经常会遇到文本内容较多，需要在有限的空间内展示并提供展开查看全部内容功能的情况。使用CSS可以巧妙地实现文本自动展开，并且当文本超出两行时显示展开下箭头，提升用户体验。下面将详细介绍具体的实现方法。

我们需要设置文本的基本样式。在CSS中，可以通过设置line-height属性来控制文本的行高，通过overflow属性设置文本溢出时的处理方式。例如：

.text {
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

上述代码中，-webkit-line-clamp: 2表示限制文本显示为两行，超出部分将被隐藏。

接下来，为了实现展开下箭头的效果，我们可以使用CSS伪元素::after。当文本超出两行时，添加一个下箭头图标作为展开提示。代码如下：

.text.expandable::after {
  content: "▼";
  position: absolute;
  right: 0;
  bottom: 0;
}

这里，当文本具有expandable类时，会在文本的右下角显示一个下箭头。

然后，通过JavaScript来实现点击展开的交互功能。当用户点击下箭头时，移除-webkit-line-clamp属性，使文本全部显示。示例代码如下：

const texts = document.querySelectorAll('.text.expandable');
texts.forEach(text => {
  text.addEventListener('click', () => {
    text.style.webkitLineClamp = 'unset';
  });
});

最后，在HTML中，将需要实现此效果的文本元素添加相应的类。例如：

<p class="text expandable">这里是较长的文本内容……</p>

通过以上CSS和JavaScript的结合，我们成功实现了文本自动展开且超出两行显示展开下箭头的功能。这种方法不仅可以使网页内容展示更加美观和合理，还能方便用户查看完整信息，提高网站的用户友好性。在实际应用中，可以根据具体需求对样式和交互进行进一步的优化和调整。