解决Firefox不支持-webkit-line-clamp属性

在网页设计中，为了美观和易读性，经常需要对文本进行截取或折叠显示。这时我们可以使用 text-overflow 和 line-clamp 属性来实现。比如，使用 line-clamp 属性可以限制文本行数并折叠多余部分。

但是，line-clamp 属性只在 WebKit 内核的浏览器中才被支持，而 Firefox 等其他浏览器却不支持。

那么，如何在 Firefox 中实现类似的效果呢？以下是两种方案可供参考。

方案一：使用纯 CSS 解决方案

我们可以使用 ::after 伪元素来生成一段内容，再使用 display: block 和 height: 0 来将其隐藏。

结合 line-height 属性可以控制每行的高度，从而实现“折叠”的效果。

此外，为了获得良好的兼容性，我们还需要添加 -moz-box-sizing: border-box 属性。

示例代码如下：

.my-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 2.4em; /* 2行文字，每行1.2em高 */
}
.my-text::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.2em;
  height: 1.2em;
  background-color: white; /* 覆盖多余的内容 */
}

方案二：使用 JavaScript 解决方案

我们可以编写一个 JavaScript 函数来计算并截取文本内容，然后将其加入元素中。

示例代码如下：

<div class="my-text"></div> <!-- 用于显示截取后的文本 -->

<script>
function clampText(selector, lineCount) {
  var el = document.querySelector(selector);
  var lineHeight = parseInt(window.getComputedStyle(el).lineHeight, 10);

  el.style.overflow = 'hidden';
  el.style.maxHeight = lineHeight * lineCount + 'px';

  var fullText = el.textContent.trim();
  var words = fullText.split(' ');
  var currLine = words[0];
  var linesUsed = 1;

  for (var i = 1; i < words.length; i++) {
    var word = words[i];
    var nextLine = currLine + ' ' + word;
    var testNode = document.createTextNode(nextLine);

    el.appendChild(testNode);

    if (el.offsetHeight > el.clientHeight) {
      el.removeChild(testNode);
      el.innerHTML = currLine + '...';
      break;
    }

    currLine = nextLine;
    linesUsed++;
  }
}

clampText('.my-text', 2); // 截取两行
</script>

以上两种方案都可以有效解决 Firefox 不支持 -webkit-line-clamp 属性的问题。具体使用哪种方案，取决于你的具体需求和实际情况。