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上它似乎可以正常工作，但在我的电脑上却不行。）

- user3104155

---

当页面最初加载时，判断目标元素是否存在于DOM中。 - Arun P Johny

是的，当页面最初加载时，所有内容都在DOM中，就像这个例子一样。 - user3104155

@user3104155 请尝试我的答案。 - Zword

作为调试步骤，可以尝试使用setTimeout(doResize, 1000)而不是doResize()。 - Arun P Johny

添加选项 watch: true - Gavin

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>

- Zword

Answer 2

试试这个：

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

- Bhojendra Rauniyar

Answer 3

我找到的最好且唯一的解决方案是这个：

。

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

这个解决方案是基于dotdotdot的下一个版本（1.7.5）提出的代码。您可以在这里查看它：增加了使用CSS类而无需JS编程的功能，并添加了一些其他功能。

- giucas falchetto

---

唯一有效的解决方案被踩了，真是令人惊讶。谢谢Giucas！ - Sativa Diva

Answer 4

如果有人在两年后看到这个问题（就像我一样因为遇到了同样的问题）：

你不需要触发resize()函数。你可以通过纯CSS解决这个问题：

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

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

- Stefanie Doll

Answer 5

你可以通过 watch: 'window' 在 dotodotdot 中添加选项

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

- bigN

---

这个属性是正确的解决方法，但是对于字体加载问题，您需要设置 watch: true，它会监视元素本身的调整大小（一旦新字体加载完成），而不仅仅是窗口。 - Gavin