Jquery dotdotdot仅在窗口调整大小时正确触发

Question

为了在元素中的第二行之后创建省略号，我使用jquery dotdotdot 。 我正在使用google字体'source sans pro' ，但是在调整窗口大小之后它才能正常工作。

这是在调整窗口大小之前文本的显示方式（省略号创建得太早）

这是在调整窗口大小后文本显示的方式（省略号位于正确的位置）

（我假设这种情况正在发生，因为字体没有完全加载到页面的负载上，但我可能是错的？）

这就是我调用jquery dotdotdot的方式。

    $(document).ready(function(){
        doResize();
        $(window).on('resize', doResize);
    });
    function doResize() {
        $(".col-mid a").dotdotdot({
            ellipsis: '...',
            height  : 40
        });
    }

我怎么做它才能正常工作？ 我已经尝试延迟调用dotdotdot函数的时间，但这看起来很糟糕，就像一个糟糕的解决方案。

这是相关代码的jsfiddle。 （奇怪的是它似乎在jsfiddle上运行正常，但它在我的计算机上不起作用。）

Answer 1

如果在调整大小后它可以工作，你可以在页面加载时触发调整大小并解决你的问题：

$(window).trigger('resize');

要么

尝试将代码嵌入：

$(window).load(function(){   });

因为这就是代码在jsfiddle的源代码中的显示方式，你提到它在jsfiddle中工作。所以试一试。

将脚本代码更改为：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $(document).ready(function(){
        doResize();
        $(window).on('resize', doResize);
    });
    function doResize() {
        $("a").dotdotdot({
            ellipsis: '...',
            height  : 60
        });
    }

});//]]>  

</script>

Answer 2

尝试这个：

$(document).ready(function(){
        //doResize();
        $(window).on('load resize', doResize);
    });

Answer 3

如果有人在这个问题发布两年后就在这里结束了（......就像我刚才那样，因为我有同样的问题）：

您不需要触发resize（）函数。 您可以使用纯CSS解决此问题：

只需为您的webfont选择不同的（网页安全）后备字体。 回退字体应该呈现与webfont类似/宽度，以便文本元素在webfont完全加载之前和之后占用相同的空间。

对于'Source Sans Pro'，'Times New Roman'，Times，serif'可能是最好的选择。 请参阅http://www.w3schools.com/cssref/css_websafe_fonts.asp

Answer 4

我发现的最好和唯一的解决方案是：

jQuery(window).load(function(){
    jQuery("a").trigger("update.dot");
});

这个解决方案是针对dotdotdot的下一个版本（1.7.5）提出的代码。 你可以在这里看到它： 增加了使用CSS类的功能，而不需要JS编程并增加了一些功能

Answer 5

您可以通过dot：'window'通过dotodotdot添加选项

$(".content-class").dotdotdot({
    ellipsis    : '... ',
    watch       : 'window',
});