jquery - 在 div 包装内跨度

Question

我在 div 中有一个 span 元素，像这样

<div id='news_ticker'><span id='news_ticker_text'>this is some long string that is long</span></div>

当我使用 JQuery 的动画在文档中移动跨度时，跨度及其文本转到 div 中的下一行。我尝试将 div 宽度设置为非常大的宽度，但它起作用了，但是有更好的解决方案吗？

我的代码是这样的

 #news_ticker_text { 
   visibility: hidden;
}
#news_ticker {
    background-color:black;
    position:fixed;
    width: 9999%;
    overflow: hidden;
}


/** Slides ticker text right. */
function slide_ticker_text() {
    var width = $(document).width();
    reset_ticker_text();
    $("#news_ticker_text").animate({
    marginLeft: width + "px",
    }, 25000, 'linear' /* Progresses linearly instead of easing.*/,
    function() {
        setTimeout(slide_ticker_text, 50);
    });
}
/** Resets ticker text to starting position. */
function reset_ticker_text() {
    var onset = -1 * $('#news_ticker_text').width() +"px";
    $('#news_ticker_text').css({
        visibility: "visible",
        marginLeft: onset
    });
}
setTimeout(slide_ticker_text, 50);

Answer 1

使用 white-space跨度上的属性:

#news_ticker_text {
    white-space: nowrap;
}

这样，您的跨度文本将只使用您专门提供的换行符。