Marquee не отображает весь текст - обрезание в разных точках

Question

В моей области не отображается весь текст, который я разместил в своем div. В определенный момент он всегда обрезается. Любая идея, как я могу получить его, показать весь текст?

Это мой код до сих пор (демо на http://jsfiddle.net/yLwhe/)

HTML

<div id="marquee">They came down the village, crossing ghostly forests, almost falling apart. Their bags were full: garlands, amethysts, gold, frankincense, myrrh. Incredible strings arrived with them: heavenly sounds drew water from marble stones, provoking visions never seen before. Who brought those tired magicians? Why had such a music enchanted our sordid souls? Was no answer available? Did we need one? Voices overheard told of incredible tales: children following mice, drowning, dead. Fear turned us into shivering salty statues, unable to look back. Many years later, explorers ventured and found this tiny town, every inhabitant eternally still, imprisoned forever by strange chords.</div> 

CSS

#marquee { 
    color: #000; 
    height: 16px; 
    padding-bottom: 5px; 
} 

JS

$(function() { 

    var marquee = $("#marquee"); 
    marquee.css({"overflow": "hidden", "width": "100%"}); 

    // wrap "My Text" with a span (IE doesn't like divs inline-block) 
    marquee.wrapInner("<span>"); 
    marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 
    marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text" 

    marquee.wrapInner("<div>"); 
    marquee.find("div").css("width", "200%"); 

    var reset = function() { 
     $(this).css("margin-left", "0%"); 
     $(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset); 
    }; 

    reset.call(marquee.find("div")); 

    }); 

Answer 1

Ваш исходный код предполагается, что в 100% ширина <span> (т. 50% внутри 200% ширина <div>) разместит весь текст.

Я изменил его, чтобы фактически рассчитать ширину, требуемую строкой, а затем использовать ее для создания анимации.

Проверить это модифицированная версия: http://jsfiddle.net/yLwhe/5/

т.е.

... 
marquee.find("span").css({ ... }); 

// get the actual used width 
var w = marquee.find("span").width(); 

... 
var reset = function() { 
    $(this).css("margin-left", "0"); 

    // use calculated width for animation. 
    $(this).animate({ "margin-left": "-"+w+"px" }, 40000, 'linear', reset); 

}; 

Answer 2

Работа скрипку: http://jsfiddle.net/yLwhe/6/

Во-первых, чтобы избавиться от этой проблемы, где текст вырезан в точке, примените white-space: nowrap к div:

marquee.wrapInner("<div>"); 
marquee.find("div").css({ 
    "width": "100%", 
    "white-space": "nowrap" 
}); 

В противном случае линии будут разрываться, когда они достигнут конца div.

Во-вторых, где вы пытаетесь анимировать следующие margin-left:

$(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset); 

Это не будет работать, потому что 100% вы имеете в виду это не ширина самого div, или его содержимое, а ширину его контейнера. Вы должны сделать это вместо того, чтобы:

$(this).animate({ -$(this).find('span').width() + 'px' }, 10000, 'linear', reset); 

Который будет двигаться div точно длину пикселя одного из его дочерних spans.

Answer 3

Если вы измените ширину div marquee, тогда проблема будет решена.

marquee.css ({"overflow": "hidden", "width": "100%"});

В приведенном выше коде, если мы изменим ширину 100% на 308%, тогда она будет работать нормально в FF, Chrome (последняя версия), и если мы изменим ширину на 100% до 325%, тогда она будет работать нормально в IE ,

Answer 4

Просто

обертывание текст в maqrquee тег с DIV и дайте ему имя класса. наконец, используйте дополнение к этому классу. Значение заполнения зависит от размера шрифта.

Вместо того, чтобы использовать этот стиль

<marquee behavior="alternate" direction="right">Here is marquee text</marquee> 

Используйте примеры ниже.

HTML Пример:

<marquee behavior="alternate" direction="right"><div class="maqquee_text">Here is marquee text</div></marquee> 

CSS Пример

div.maqquee_text{padding:10px;} 

Это работает для меня.

Answer 5

Вот ответ, основанный от ответа techfoobar, в том, что не создает дубликат диапазон для небольших строк и имеет более даже скорость прокрутки, независимо от длины текста:

$(function() { 
 

 
    var marquee = $("#marquee"); 
 
    
 
    marquee.wrapInner("<span>"); 
 
    
 
    var w = marquee.find("span").width(); 
 
    var w2 = $(document.body) .width(); 
 
    
 
    if (w < w2) { 
 
     w = w2; 
 
     marquee.css({"overflow": "hidden", "width": "100%", "white-space": "nowrap","text-align":"right"}); 
 
    
 
     marquee.wrapInner("<div>"); 
 
     marquee.find("div").css("width", (w)+'px'); 
 
    } 
 
    else { 
 
     marquee.css({"overflow": "hidden", "width": "100%", "white-space": "nowrap"}); 
 
     marquee.find("span").css({ "width": "auto", "white-space": "nowrap", "display": "inline-block", "text-align":"center", "padding-right": "10px" }); 
 
     marquee.append(marquee.find("span").clone()); 
 

 
     marquee.wrapInner("<div>"); 
 
     marquee.find("div").css("width", (w*2)+'px'); 
 
    } 
 

 
    var reset = function() { 
 
     $(this).css("margin-left", "0"); 
 
     $(this).animate({ "margin-left": "-"+w+"px" }, w*4.5, 'linear', reset); 
 
    }; 
 

 
    reset.call(marquee.find("div")); 
 
\t 
 
});

#marquee { 
 
\t color: #000; 
 
\t height: 16px; 
 
\t padding-bottom: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="marquee"> They came</div>