如何在Firefox响应上截断长字符串

Question

我要使文本在下面显示2行图像。 image example

这是在chrome上的外观，但是在Firefox中不起作用。我发现这个网站有Chrome教学课程。链接：https://css-tricks.com/line-clampin/。使用-webkit-line-clamp检查我们要在哪一行添加“ ...”。但是，在firefox上，我们没有像本教程这样的标签“ -webkit-line-clamp”。因此，有任何方法可以使文本在Firefox上被截断。我曾经用如下的JavaScript来修剪字符串。

String.prototype.truncString = function(max, add){
    add = add || '...';
    return (this.length > max ? this.substring(0,max)+add : this);
};
if($(".smaller_768 ").width() < 200 && $(".smaller_768 ") > 120){
    trim_content(28);
}
function trim_content(numberofwords){
            $(".smaller_768").each(function(){
                var content = $.trim($(this).text());
                $(this).text(content.truncString(numberofwords, "..."));
            });
}

但是当我更换设备时，由于div的大小已更改，所以它不能很好地工作。

谢谢。

Answer 1

尝试使用以下方法在窗口调整大小时调用函数：

$(window).on("resize", function(){
   if($(".smaller_768 ").width() < 200 && $(".smaller_768 ") > 120){
      trim_content(28);
   }
});

使用resize函数，它将在每次调整浏览器大小时更改字符串的数量。