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

Question

为了在元素内的第二行之后创建一个省略号，我使用了 jquery dotdotdot .我将它与 google font 'source sans pro' 一起使用，但是在调整窗口大小之前它无法正常工作。

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

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

(我假设发生这种情况是因为页面加载时字体未完全加载，但我可能是错的？)

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

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

我怎样才能让它正常工作？我试过延迟调用 dotdotdot 函数的时间，但这看起来很老套，而且是一个糟糕的解决方案。

Here's a jsfiddle of relevant code. (奇怪的是，它似乎在 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>