javascript - Jquery dotdotdot only fired properly on window resize - Stack Overflow

admin管理员组

文章数量:1291097

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 puter.)

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 puter.)

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jan 6, 2014 at 6:47 user3104155user3104155 23733 silver badges77 bronze badges 4

• whether the target elements are present in the dom when the page is loaded initially – Arun P Johny Commented Jan 6, 2014 at 6:48
• Yes everything's in the dom when the page loads initially, just like in this example. – user3104155 Commented Jan 6, 2014 at 6:49
• as a debugging step can try setTimeout(doResize, 1000) instead of doResize() – Arun P Johny Commented Jan 6, 2014 at 6:52
• Add the option watch: true – Gavin Commented Dec 12, 2019 at 10:56

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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>

Try this:

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

in case anyone ends up here two years after this question was posted (...like I just did because I had the same problem):

You don't need to trigger a resize() function. You can solve this problem with pure CSS:

Just choose a different (websafe) fallback font for your webfont. The fallback font should render similar/ as wide as your webfont so that the text-elements take the same space before and after your webfont is fully loaded.

For 'Source Sans Pro', '"Times New Roman", Times, serif' is probably the best option. See http://www.w3schools./cssref/css_websafe_fonts.asp

The best and only solution I found is this:

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

This solution is taken by the code proposed for the next versione (1.7.5) of dotdotdot. You can see it here: Added functionality to use CSS classes without need of JS programming and added some more features

You can add option through dotodotdot by watch: 'window'

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

本文标签： javascriptJquery dotdotdot only fired properly on window resizeStack Overflow