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>

Answer 2

试试这个：

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

Answer 3

我找到的最好也是唯一的解决方案是：

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

这个解决方案是针对dotdotdot的下一个版本（1.7.5）提出的代码。你可以在这里看到它：Added functionality to use CSS classes without need of JS programming and added some more features

Answer 4

万一有人在这个问题发布两年后就到了这里（...就像我刚才那样，因为我遇到了同样的问题）：

您不需要触发resize（）函数。你可以用纯CSS来解决这个问题：

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

源于Sans Pro＆＃39;，＆＃39;＆＃34; Times New Roman＆＃34;，Times，serif＆＃39;可能是最好的选择。见http://www.w3schools.com/cssref/css_websafe_fonts.asp

Answer 5

您可以通过watch：'window'

通过dotodotdot添加选项

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