CODEWITHSUNDEEP
jquerycsshtml
George Newton
George Newton

Reputation: 3293

Span inside div wraps

I have a span element inside a div, like this

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

When I move the span across the document using JQuery's animate, the span and its text goes to the next line in the div. I tried setting the div width to a very large width, and it worked, but is there a better solution?

My code is like

 #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);

Upvotes: 0

Views: 266

Answers (1)

Shomz
Shomz

Reputation: 37701

Use the white-space property on your span: 

#news_ticker_text {
    white-space: nowrap;
}

That way, your span text will only be using line breaks you specifically provide.

Upvotes: 8

Related Questions