Javascript-Jquery-Ajax 自动收报机消息被截断

Question

在下面的 JavaScript 代码中，当我传递的消息太大且跨越超过一个屏幕宽度时，消息将被截断。我已经放置了警报语句，发现整个消息是从 Web 方法到 JavaScript 代码，但在显示它时，它会截断消息。由于我是 JavaScript 新手（此代码是我从网络上获得的代码位的组合），因此非常感谢任何帮助。预先感谢您的帮助。

$(document).ready(function() {

    //initialize ul;
    $("#scroller").html("");
    var tkhtml = '';
    var successReq = false;


    $.ajax({
        type: "POST",
        url: "GetDataFromWebMethod.aspx/GetDataForTicker",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            var y = msg.d;
            var x = y.split('~');
            alert(x.length);

            if (x != '') {
                for (n = 0; n < x.length; n++) {
                    tkhtml = tkhtml + '<li>' + x[n] + '</li>';
                }
                alert(tkhtml);
                $("#scroller").html(tkhtml);
                successReq = true;
            }
        },
        error: function(msg) {
            alert("Entered Failure");
        }

    });


    var successReq = false;

    var interval = setInterval(function() {
        if (successReq) {
            clearInterval(interval);
            javacode();
        }
    }, 100);

    function javacode() {
        var speed = 2;
        var items, scroller = $('#scroller');
        var width = 0;

        scroller.children().each(function() {
            width += $(this).outerWidth(true);
        });
        scroller.css('width', width);
        scroll();
        function scroll() {
            items = scroller.children();
            var scrollWidth = items.eq(0).outerWidth();
            scroller.animate({ 'left': 0 - scrollWidth }, scrollWidth * 100 / speed, 'linear', changeFirst);
        }
        function changeFirst() {
            scroller.append(items.eq(0).remove()).css('left', 0); scroll();
        }
    }


}); 

我的CSS是：

<style type="text/css"> 
    #scroller { height: 100%; margin: 0; padding: 0; line-height: 30px; position: relative; } 
    #scroller li { float: left; height: 30px; padding: 0 0 0 10px; list-style-position: inside; }
    #scrollerWrapper { height: 30px; margin: 30px; overflow: hidden; border: 1px #333 solid; background: #F2F2F2; } 
</style>

Answer 1

在我看来，您的 #scroller 设置为 width:100%，假设您的 body 或 html 是这样设置它会截断到窗口宽度。您应该尝试 width:auto

edit::

好的，所以每个 li 都是 float:left，这会将其脱离文档的标准流程。尝试使用 display:inline 或 display:inline-block