要在CSS中实现文本超过5行时隐藏并显示省略号，可以使用CSS的line-clamp属性以及相关的支持属性。以下是具体的步骤：

使用line-clamp实现多行文本截断

1. 基础样式：

   • 设置一个固定的高度来限制文本的显示行数。
   • 使用overflow: hidden来隐藏超出容器的内容。
   • 使用display: -webkit-box和-webkit-box-orient: vertical来启用WebKit的盒子模型。

2. 应用line-clamp：

   • 使用-webkit-line-clamp来设置显示的行数。
   • 由于line-clamp不是标准的CSS属性，需要结合其他属性一同使用。

示例代码

/* 通用样式 */
.text-clamp {
  display: -webkit-box; /* 用于支持 WebKit 浏览器 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5; /* 限制显示5行 */
  max-height: 7.5em; /* 计算高度：5行 * 行高（假设行高为1.5em） */
  line-height: 1.5em; /* 设置行高 */
}

HTML 示例

<div class="text-clamp">
  这是一个用于测试文本截断的例子。我们希望在这里显示一些长文本，并在超过五行时显示省略号。这是一个用于测试文本截断的例子。我们希望在这里显示一些长文本，并在超过五行时显示省略号。这是一个用于测试文本截断的例子。我们希望在这里显示一些长文本，并在超过五行时显示省略号。这是一个用于测试文本截断的例子。我们希望在这里显示一些长文本，并在超过五行时显示省略号。
</div>

解释

• display: -webkit-box: 使用WebKit的盒子模型。
• -webkit-box-orient: vertical: 设置盒子为垂直排列。
• overflow: hidden: 隐藏超出容器的内容。
• text-overflow: ellipsis: 添加省略号。
• -webkit-line-clamp: 5: 限制显示5行。
• max-height: 7.5em: 设置最大高度，假设行高为1.5em，5行则为7.5em。
• line-height: 1.5em: 设置行高为1.5em。

这个解决方案利用了-webkit-line-clamp，因此在支持WebKit的浏览器（如Chrome和Safari）中效果最好。对于其他浏览器，可以考虑使用JavaScript进行更广

泛的兼容性实现，但这可能稍微复杂一些。如果需要跨浏览器的兼容性，可以考虑使用JavaScript来实现类似的效果。下面是一个用JavaScript实现的跨浏览器多行文本截断示例：

JavaScript 版本

1. HTML:

   <div class="text-clamp" id="clampText">
    这是一个用于测试文本截断的例子。我们希望在这里显示一些长文本，并在超过五行时显示省略号。这是一个用于测试文本截断的例子。我们希望在这里显示一些长文本，并在超过五行时显示省略号。这是一个用于测试文本截断的例子。我们希望在这里显示一些长文本，并在超过五行时显示省略号。这是一个用于测试文本截断的例子。我们希望在这里显示一些长文本，并在超过五行时显示省略号。
   </div>

2. CSS:

   .text-clamp {
    overflow: hidden;
    display: block;
    position: relative;
    line-height: 1.5em; /* 设置行高 */
    max-height: 7.5em; /* 5行 * 行高（1.5em） */
   }
   
   .text-clamp::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    background: white;
    padding-left: 5px;
   }

3. JavaScript:

   function clampText(element, lineCount) {
    const lineHeight = parseFloat(getComputedStyle(element).lineHeight);
    const maxHeight = lineHeight * lineCount;
    element.style.maxHeight = maxHeight + 'px';
   
    let text = element.innerText;
    while (element.scrollHeight > element.offsetHeight) {
      text = text.slice(0, -1);
      element.innerText = text + '...';
    }
   }
   
   const element = document.getElementById('clampText');
   clampText(element, 5); // 限制5行

解释

• CSS部分：

  • overflow: hidden: 隐藏超出容器的内容。
  • position: relative: 使伪元素的定位相对于文本容器。
  • line-height: 设置行高。
  • max-height: 设置容器的最大高度。
  • ::after: 用于添加省略号，并确保其背景色与文本容器一致。

• JavaScript部分：

  • clampText函数通过比较scrollHeight和offsetHeight来检查文本是否溢出容器。
  • 如果溢出，逐步截断文本，并在最后添加省略号。

这种方法在所有现代浏览器中都能有效地工作，确保了跨浏览器的兼容性。