Marquee Text When Text Overflows

问题

well heres my problem. Lets say i have 3 div tags, all are 100pixels wide:

<--- DIV WIDTH --->
Text in div 1
Text in div two, it overflows
Text in div three
<--- DIV WIDTH --->

Now, currently i have this css for the divs:

width:100px;
overflow:hidden;

What i want to do is if the text overflows, it scrolls like a marquee so all the text can be seen if you wait a little bit. But i only want the marquee to show if the text overflows.

How would i do this?

Thx, Tony

回答1:

solving the conditional part

JS

var el = $('your element');
if (el.get(0).scrollWidth > el.width()) {
    // Your marquee code here
}

回答2:

$(function(){
  $box = $('div.box');
  $box.children().each(function(){
    if ($box.width() < $(this).width()) {
      $(this).wrap('<marquee>');
    }
  )};
});

Would work in jQuery (I haven't checked it yet. If you have any problems with it reply). Optionally, you could set a scroll attribute in css.

回答3:

The conditional part can be resolved easily like rennat proposed.

Is it possible for you to use jQuery? If it is, build your html compatible with jQuery marquee plugin, and just call $(element).marquee(); for the animation. It's better than the '<marquee>' tag since it uses only divs with proper css attributes (avoiding non-standard tags use).

回答4:

This wouldn't work for your problem as described (plain text in a div), but if that's just a minimal case, you can use overflow: auto, which will add a horizontal scrollbar if it overflows.

(Note also that marquee is a non-standard HTML tag.)

来源：https://stackoverflow.com/questions/835684/marquee-text-when-text-overflows

标签

javascript

jquery

html

css

marquee