Use a marquee in a div only if there is overflow?

I want to scroll text (marquee) in a div tag ONLY when the text overflows.

I have the marquee setup, and I am using the jQuery Marquee plugin. Everything works beautifully with the marquee, but I don't need it to scroll if the text fits on one line.

The page where I am working is here: http://lbr开发者_StackOverflow中文版annonent.com/BigCountry247/index.html. The "Title", "Artist", and "Up Next" scrolling fields all need to only scroll if there is overflow.

Any ideas?

Here is the working demo that i made for your question. It should give you the idea what to do.

If you're already using jQuery, consider this:

$(".marquee").each(function() {
  if($(this).prop('scrollWidth') > $(this).parent().width())
    $(this).wrap('<marquee></marquee>')
});

Give the divs you only want to have scrolling on overflow the class marquee instead of using a marquee tag, and as long as that's before any other code that manipulates the marquee (event handler assignment I assume) it shouldn't matter what else you're doing with it.