Jquery dotdotdot only fired properly on window resize

Question

In order to create an ellipsis after the second line within an element, I'm using jquery dotdotdot. I'm using it with the google font 'source sans pro', however it doesn't work properly until after the window is resized.

this is how the text appears before the window is resized (the ellipsis is created too early)

this is how the text appears after the window is resized (the ellipsis is in the proper position)

(I'm assuming this is happening because the font isn't fully loaded on the page's load, but I could be wrong?)

This is the way that I call the jquery dotdotdot.

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

How would I make it so it works properly? I've tried delaying the time that the dotdotdot function is called but this seems hacky, and like a bad solution.

Here's a jsfiddle of relevant code. (Weirdly enough it seems to work fine on jsfiddle, however it doesn't work on my computer.)

Answer 1

If it works after resize you can trigger resize on page load and solve your problem:

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

OR

Try embedding your code within:

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

Because thats how the code is displayed in the source of jsfiddle and you mentioned that its working in jsfiddle.Therefore give it a try.

Change your script code to:

<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

Try this:

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