非webkit内核实现多行文本溢出显示省略号

非 WebKit 内核浏览器可以通过使用 CSS 属性 -webkit-line-clamp 来实现多行文本溢出显示省略号。但是，这个属性只适用于 WebKit 内核浏览器，所以我们需要使用其他方法来实现相同的效果。

一种方法是使用 CSS3 中的 text-overflow、white-space 和 overflow 属性来实现。具体实现方法如下：

/* 显示两行文本，超出部分显示省略号 */
.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

这种方法使用了 -webkit-box 和 -webkit-line-clamp 属性，但是只有 WebKit 内核浏览器支持，所以我们需要添加其他的属性来保证在非 WebKit 内核浏览器中也能正常显示。

另一种方法是使用 JavaScript 来实现。具体实现方法如下：

<div class="line-clamp" data-lines="2">
    <!-- 多行文本 -->
</div>

.line-clamp {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 获取需要省略的行数
var lines = parseInt(document.querySelector('.line-clamp').getAttribute('data-lines'));

// 获取元素的高度和行高
var element = document.querySelector('.line-clamp');
var lineHeight = parseInt(window.getComputedStyle(element).getPropertyValue('line-height'));
var elementHeight = parseInt(window.getComputedStyle(element).getPropertyValue('height'));

// 计算需要保留的文本长度
var textLength = Math.floor((elementHeight / lineHeight) * lines);
var text = element.textContent.trim();

// 截取文本并添加省略号
if (text.length > textLength) {
    element.textContent = text.substr(0, textLength) + '...';
}

这种方法使用了 JavaScript 来计算需要保留的文本长度，并截取文本并添加省略号，可以在所有浏览器中正常工作。但是，这种方法需要在页面加载时进行计算，可能会影响页面加载速度