Выделение текста при переполнении текста

ну вот моя проблема. Допустим, у меня есть 3 тега div шириной 100 пикселей:

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

Теперь у меня есть этот css для div:

width:100px;
overflow:hidden;

Что я хочу сделать, так это если текст переполняется, он прокручивается как бегущая строка, поэтому весь текст можно увидеть, если вы немного подождете. Но я хочу, чтобы бегунок отображался только в том случае, если текст переполняется.

Как бы я это сделал?

Спасибо, Тони


javascript html jquery css marquee
person Mike Stanford    schedule 07.05.2009    source источник

Ответы (4)


arrow_upward
8
arrow_downward

решение условной части

JS

var el = $('your element');
if (el.get(0).scrollWidth > el.width()) {
    // Your marquee code here
}
person rennat    schedule 07.05.2009
comment
Для чего мне пришлось использовать .outerWidth(), а не width(). - person Andrew; 01.07.2014

arrow_upward
3
arrow_downward 

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

Будет работать в jQuery (я еще не проверял. Если у вас есть какие-либо проблемы с этим, ответьте). При желании вы можете установить атрибут прокрутки в css.

person CodeJoust    schedule 07.05.2009
comment
marquee устарел. и зачем придумывать здесь jQuery, когда все, что вы здесь делаете, это заключаете некоторые элементы в теги? можно было сделать в коде, нет?! - person honk31; 30.05.2017

arrow_upward
1
arrow_downward

Условная часть может быть легко решена, как предложил Реннат.

Можно ли использовать jQuery? Если это так, создайте свой HTML-код, совместимый с плагином jQuery marquee, и просто вызовите $(element) .шатер(); для анимации. Это лучше, чем тег «<marquee>», поскольку он использует только элементы div с соответствующими атрибутами CSS (избегая использования нестандартных тегов).

person LobsterZorg    schedule 13.10.2009

arrow_upward
0
arrow_downward

Это не сработает для вашей проблемы, как описано (простой текст в div), но если это просто минимальный случай, вы можете использовать overflow: auto, который добавит горизонтальную полосу прокрутки, если она переполнится.

(Обратите внимание, что marquee — это нестандартный HTML-тег.)

person Plutor    schedule 07.05.2009