Separate content if it's larger than - px

I don't really know how to ask this. Lets say I have a box with dynamically generated content. I want to add a sepa开发者_StackOverflow社区rator, let's say a line, if the content is larger than something. So it would basically look like this:

It doesn't really matter how I accomplish this, CSS, JavaScript, anything.

Thanks, JC.

The way you do it is you first need to measure how much text will fit in the original box with the constrained height. To do this you can create another element with the same with. Keep adding characters until the height exceeds the height of the original element. I don't know if there is an easier or more efficient solution.

Here is a jsFiddle with an example:

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

Hope this gets you started.

Bob

I guess with jQuery (JS) you'd solve it something like this:

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