Jquery dotdotdot只有在窗口调整大小时才能正确启动。

Question

为了在元素中的第二行之后创建省略号，我使用了jquery点点。我正在与谷歌字体“源代码无专业版”一起使用它，但是它在调整窗口大小之后才能正常工作。

在调整窗口大小之前，文本就是这样出现的(省略号创建得太早了)

​

​

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

​

​

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

这就是我称之为jquery dotdotdot的方式。

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

我怎样才能使它正常工作呢？我试图延迟调用dotdotdot函数的时间，但这似乎很麻烦，而且是一个糟糕的解决方案。

下面是一些相关代码的篡改。 (奇怪的是，它在jsfiddle上工作得很好，但在我的计算机上却不起作用)。

Answer 1

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

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

或

尝试将您的代码嵌入到：

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

因为这是如何在jsfiddle源代码中显示代码的，而且您还提到了它在jsfiddle.Therefore中的工作方式，让它尝试一下。

将脚本代码更改为：

<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

如果有人在发布这个问题两年后来到这里(...like，我之所以这么做是因为我有同样的问题)：

您不需要触发一个resize()函数。您可以使用纯CSS解决这个问题：

只需为您的for字体选择不同的(websafe)回退字体。回退字体应该呈现与你的网页字体一样宽的字体，这样文本元素在你的网页字体被完全加载之前和之后占据相同的空间。

对于‘源无专业’，‘时代新罗马“，时代，衬线’可能是最好的选择。请参阅fonts.asp