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>