如何使股票代码文本以单行形式出现而不是转到下一行

时间:2015-08-07 18:33:08

标签: bxslider

我在我的网站上使用BXslider Jquery作为新闻自动收报机,这个插件工作正常但问题是新闻进入下一行并展开整个标题,这使得网站看起来有点尴尬。

如何以单线方式实现新闻自动收报机?

    HTML
<ul id="top-ticker">
<li>Test TEST TEST TEST TEST TEST TEST TEST</li>
</ul>

Javascript Code
jQuery(function($) {
if( $("#top-ticker").length > 0 ) {
    var topTicker = $('#top-ticker').bxSlider({
        mode: 'vertical',
        pager: false,
        controls: false,
        auto: true,
        speed: 4000,
        onSliderLoad: function() { 
            $('#top-ticker').addClass('ticker-loaded'); 
        }
    });

}

});

CSS样式

/* top ticker */
#top-ticker {
list-style: none;
margin: 0;
padding: 0;
}
#top-ticker li {
display: block;
padding: 1px 0
}
#top-ticker li + li {
display: none;
}
#top-ticker.ticker-loaded li + li {
    display: block;
}

.fl-page-bar-text .bx-wrapper .bx-viewport {
background: none;
border: none;
box-shadow: none;
}

1 个答案:

答案 0 :(得分:0)

试试这个:

#top-ticker li {
    /* Prevent from going to new line */
    white-space: nowrap;
    /* Prevent the horizontal scroll bar */
    overflow: hidden;
}