javascript - 仿彈幕效果遇到的bug

Question

利用定位寫的仿彈幕效果，一碰到邊緣就出現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);
}

問題是彈幕只要碰到螢幕左邊文字就折行了：

#但是輸入數字就不會這樣，我沒有給固定寬度，也不知道為什麼會這樣？

#

Answer 1

這個和瀏覽器處理文本的原理有關，沒有深刨到底層，但是可以近似於這麼理解：
1、瀏覽器處理的區分標準其實是英文單詞，當遇到多個英文單字（中間含空格分隔開才算，原因見下文）溢出螢幕時，猜測設計者的初衷是為了便於閱讀，所以瀏覽器會以空格作為分隔標準，對英文字母換行處理（因為瀏覽器認為空格隔開了，這是一個單字），而長英文字母串，中間無空格，會被判斷為這是一整個單字所以不會換行。
2、輸入中文時，瀏覽器會把每一個中文判斷為一個“單字”，所以對每一個溢出螢幕的字都進行了換行處理。
3、對於數字，瀏覽器辨識規則和英文字母一致。

所以綜上，並非是文字和數字有所區別，關鍵應該在於空格。例如你可以測試一下你程式碼中的message = "777 777 777"，即數字間含空格，會發現就算是數字，瀏覽器也換行了。同理亦可測試message = "cat cat cat"和"catcatcat"的差異。
最後回到white-space: nowrap這個屬性，w3school給出的意思是「文字不會換行，文字會在同一行上繼續，直到遇到
標籤為止。」所以也能解釋得通為什麼加上之後文字就沒有換行了。

Answer 2

css加上white-space: nowrap;