javascript - Bugs encountered when imitating barrage effect

Question

Using positioning to write the imitation barrage effect, a bug will appear as soon as it touches the edge

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

The problem is that the barrage breaks as soon as it touches the text on the left side of the screen:

But this won’t happen when entering numbers. I didn’t give a fixed width. I don’t know why this happens?

Answer 1

This is related to the principle of text processing by the browser. It has not gone into the bottom layer, but it can be roughly understood like this:
1. The distinguishing standard for browser processing is actually English words. When multiple English words are encountered (with spaces in between) Separation counts (see below for the reason)) When overflowing the screen, I guess the designer's original intention was to facilitate reading, so the browser will use spaces as the separation standard to wrap the English letters (because the browser thinks that spaces are separated, this is A word), and a long string of English letters without a space in the middle will be judged as a whole word and will not wrap.
2. When inputting Chinese, the browser will judge each Chinese character as a "word", so every word that overflows the screen will be line-wrapped.
3. For numbers, the browser recognition rules are the same as English letters.

So to sum up, it’s not the difference between words and numbers, the key lies in the spaces. For example, you can test the message = "777 777 777" in your code, that is, there are spaces between numbers. You will find that even if it is a number, the browser will wrap the line. In the same way, you can also test the difference between message = "cat cat cat" and "catcatcat".
Finally, let’s go back to the white-space: nowrap attribute. The meaning given by w3school is “the text will not wrap, and the text will continue on the same line until it encounters the <br> tag.” So it can be explained. Why does the text not wrap after adding it?

Answer 2

css plus white-space: nowrap;