Separate Inhalte, wenn es größer ist als - px

Question

Ich weiß nicht wirklich, wie ich das fragen soll. Sagen wir, ich habe eine Box mit dynamisch generiertem Inhalt. Ich möchte ein Trennzeichen hinzufügen, sagen wir eine Zeile, , wenn der Inhalt größer als etwas ist. So wäre es im Grunde wie folgt aussehen:

Es spielt keine Rolle, wie ich das erreichen, CSS, JavaScript, alles.

Danke, JC.

Answer 1

Die Art und Weise Sie es tun ist, müssen Sie zuerst messen, wie viel Text in der Originalverpackung mit dem eingeschränkten passen Höhe. Um dies zu tun, können Sie ein anderes Element mit dem gleichen erstellen. Fügen Sie Zeichen hinzu, bis die Höhe die Höhe des ursprünglichen Elements überschreitet. Ich weiß nicht, ob es eine einfachere oder effizientere Lösung gibt.

Hier ist ein jsFiddle mit einem Beispiel:

http://jsfiddle.net/rcravens/rXsBy/

Hope this bekommt man begonnen.

Bob

Answer 2

Ich denke, mit jQuery (JS) Sie würde es so etwas wie dieses lösen:

$('.box').each(function(i, box){ 
    var $b = $(box); 
    if($b.height() > 200){ 
     $b.after($('</div>', { 'class' : 'separator' }); 
    } 
});