Jquery dotdotdot nur richtig ausgelöst Fenstergröße

Question

Um eine Ellipse nach der zweiten Zeile innerhalb eines Elements zu erstellen, verwende ich jquery dotdotdot. Ich benutze es mit der google font 'source sans pro', aber es funktioniert nicht richtig, bis nach der Fenstergröße geändert wird.

das ist, wie der Text angezeigt wird, bevor das Fenster verkleinert wird (die Ellipsen zu früh erstellt werden)

das ist, wie der Text erscheint, nachdem das Fenster verkleinert wird (das Auslassungszeichen in den richtigen Position)

(ich gehe davon aus das geschieht, weil die Schrift nicht vollständig auf der Seite des Last geladen wird, aber ich könnte falsch sein?)

So nenne ich die jquery dotdotdot.

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

Wie würde ich es so machen, damit es richtig funktioniert? Ich habe versucht, die Zeit zu verzögern, die die dotdotdot-Funktion aufgerufen wird, aber das scheint hacky und wie eine schlechte Lösung.

Here's a jsfiddle of relevant code. (Seltsam genug scheint es auf jsfiddle gut zu funktionieren, aber es ist nicht auf meinem Computer nicht funktioniert.)

Answer 1

Wenn es nach dem Ändern der Größe funktioniert können Sie auf Seite Belastung auslösen Größe und Ihr Problem lösen:

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

ODER

Versuchen Sie den Code einbetten in:

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

Weil das ist, wie der Code in der Quelle von jsfiddle angezeigt wird und Sie erwähnt, dass es in jsfiddle.Thesfore deshalb es versuchen.

Ihr Script-Code ändern:

<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

Versuchen Sie folgendes:

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

Answer 3

falls jemand zwei Jahren hier endet, nachdem diese Frage gestellt wurde (... wie ich, weil ich gerade tat hatte das gleiche Problem):

Sie müssen keine resize() - Funktion auslösen. Sie können dieses Problem mit reinem CSS lösen:

Wählen Sie einfach eine andere (websichere) Fallback Schriftart für Ihren Webfont. Die Fallback-Schriftart sollte ähnlich/so breit wie Ihr Webfont werden, damit die Textelemente vor und nach dem vollständigen Laden Ihres Webfont den gleichen Platz einnehmen.

Für 'Source Sans Pro', '' Times New Roman ', Times, Serif' ist wahrscheinlich die beste Option.Siehe http://www.w3schools.com/cssref/css_websafe_fonts.asp

Answer 4

Die beste und einzige Lösung, fand ich, ist dies:

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

Diese Lösung durch den Code vorgeschlagen, für die nächste versione (1.7.5) von dotdotdot genommen wird. Sie können es hier sehen: Added functionality to use CSS classes without need of JS programming and added some more features

Answer 5

Sie Option durch dotodotdot durch Uhr hinzufügen: ‚Fenster‘

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