利用定位写的仿弹幕效果，一碰到边缘就出现bug

CSS：

.dmMsg{
    position:absolute;
    display: inline-block;
    right:0;
    top:0;
    color:#fff;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    line-height: 1em;
    z-index: 100;
}

JS：

var $temp = $("<span class='" + msgType + " " + moveInType + "' data-count="+ msg_count +">" + message + "</span>");

$('.' + parent).append($temp);
    $temp.animate({
        'right':'100%'
    },15000,loop);
}

function loop(){
    $temp.css('right','-400px');
    $temp.animate({
        'right':'100%'
    },15000,loop);
}

问题是弹幕只要碰到屏幕左边文字就折行了：

但是输入数字就不会这样，我没有给固定宽度，不知道为什么会这样？