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;
}

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

div内的跨度包裹

1 个答案: